iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
0
Modern Web

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

Parcel入門使用

  • 分享至 

  • xImage
  •  

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


上一篇
零配置、極速網頁打包工具--Parcel
下一篇
超好用的HTML編輯外掛介紹 - Emmet
系列文
從零開始遲來的Web開發筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言