Parcel入門使用

2019 iT 邦幫忙鐵人賽

DAY 14

Modern Web

從零開始遲來的Web開發筆記系列第 14 篇

2019鐵人賽

lagagain

2018-10-29 21:06:14

2541 瀏覽

分享至

昨天說到，Parcel支援Pug、SCSS、Less、Stylus、Vue、TypeScript、WebAssembly等等。先簡短的說一下TypeScript，TypeScript是MicroSoft提出的一個語言，基本上是ES6的超級，類似於C++之於C，TypeScript之於JavaScript。換句話說，將.js附檔名改爲.ts就是一支TypeScript的程式。不多介紹TypeScript，但是要在Parcel裡使用TypeScript也是一樣，只需要把<script></script>裡src指定的檔案，改爲TypeScript檔案即可。

Parcel目前已經直接支援Pug(實際上如果使用到，會自動安裝相關依賴)。來拿前幾天的程式，再來修改一些東西說明：

base.pug

<!doctype html>
<html>

<head>
    block title
        <title>Title</title>
</head>

<body>
    block header
        <header>This is HEADER</header>
    block body
        <article>This is MAIN</article>
    block footer
        <footer>This is FOOTER</footer>
</body>

</html>

main_page.pug

extends base.pug

block header
    <nav>
        <a href="other_page.pug">Other Page</a>
    </nav>

block append body
    <article>This is Child Body</article>

block prepend footer
    <div>Before footer, Child want to say somthing</div>

先注意到我們在block header中加入一個超連結，但是連接的檔案是other_page.pug，不是HTML。然後建立other_page.pug:

extends base.pug
block append body
    <article>The Other Page</article>

現在嘗試打包：parcel build main_page.pug -d public。隨後就會再public資料夾底下看到main_page.html和other_page.html。parcel的打包同樣允許多入口，像是parcel one.pug two.pug three.pug -d public等等，並且在server模式下，預設會嘗試開起1234 port，可開起瀏覽器瞭解目前程式情況。
Parcel使用方式很像pug-cli，並且支援pug，同時對於CSS的@import、JavaScript兩種主要模組化風格也有所支持，且簡單易用。