昨天說到,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兩種主要模組化風格也有所支持,且簡單易用。