Parcel上手實踐

鈞嘢嘢發表於2018-01-29

Webpack是目前最多人使用的前端打包工具，但webpack功能強大，導致配置比較複雜（各種對應轉換loader，各種外掛等），如果配置不合理還可能導致打包速度過慢。

最近出現了一款新的打包工具Parcel，受關注程度不亞於Webpack。下面就看下如何具體使用Parcel。

快速上手

關於安裝直接檢視官網。

1. 檔案引用

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <h1 id="title"></h1>
        <p id="body"></p>
    </div>
    <script src="./index.js"></script>
</body>
</html>
複製程式碼

這裡通過script標籤引入了js的入口檔案。

index.js

const posts = require('./posts');

posts.fetchOnePost()
    .then(post => {
        document.getElementById('title').innerHTML = post.title;
        document.getElementById('body').innerHTML = post.body;
    })
複製程式碼

這裡通過require()匯入當前目錄下的posts.js檔案。

posts.js

module.exports = {
    fetchOnePost: function () {
        return new Promise((resolve, reject) => {
            fetch('http://jsonplaceholder.typicode.com/posts/1')
                .then(res => res.json())
                .then(data => {
                    resolve(data);
                })
        })
    }
}
複製程式碼

這裡通過fetch()方法請求一個json資料，index.js中通過呼叫該方法對資料進行顯示。

命令列執行$ parcel index.html，就可以打包生成對應的dist檔案了，同時會自動啟動一個Server，在http://localhost:1234看到結果。

dist檔案中會生成一個跟你的專案名稱一樣的js檔案，該js檔案就是打包後的js檔案了。

2. 內建轉換器

Parcel相比與Webpack，內建了很多常用的轉換器，不需要我們自己去安裝和配置這些loader（諸如style-loader, css-loader等）。而且還內建了Babel，也不需要我們安裝Babel的各種東西了。

如將檔案匯入改成es2015形式：

index.js

import { posts } from './posts';
複製程式碼

posts.js

export const posts = {
    ...
}
複製程式碼

此時重新整理http://localhost:1234仍然是正常顯示的。

3. CSS檔案

CSS中最常用的外掛之一是PostCSS，這裡不用像Webpack那樣需要安裝PostCSS了，Parcel已經內建有了。如果我們需要用到PostCSS的autoprefixer功能，只需要安裝autoprefixer外掛並配置好.postcssrc檔案就可以了。

Parcel 在模組中找到配置檔案 (例如 .babelrc ，.postcssrc) 時會自動執行並進行轉換。

安裝PostCSS外掛autoperfixer： $ npm install autoprefixer

.postcssrc

{
    "plugins": {
        "autoprefixer" : true
    }
}
複製程式碼

style.css

h1 {
    color: gray;
    border: 1px solid red;
    border-radius: 5px;
    display: flex;
}
複製程式碼

打包後的css檔案：dist/b032741df18dc4b3aeb571ee677c350f.css

h1 {
    color: gray;
    border: 1px solid red;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
複製程式碼

可以看到瀏覽器字首自動加上了。此外還多出了一個同名的js檔案7963b20fc948f008b0e9fbc9750edbe8.js。這個應該就是parcel將css檔案轉成可匯入的檔案。

如果使用scss，則直接使用字尾為.scss的css檔案就可以了，parcel會自動識別並轉換。記得別忘了把index.html中的css引入改成<link rel="stylesheet" href="./style.scss">

4. 第三方模組

這裡通過npm安裝jquery：$ npm install jquery，然後在index.js中引入就可以使用了。

index.js

import { posts } from './posts';
import $ from 'jquery';

posts.fetchOnePost()
    .then(post => {
        $('#title').html(post.title);
        $('#body').html(post.body);
    })
複製程式碼

5. 外掛

官方文件中有說明，外掛統一用parcel-plugin-命名，若要讓parcel支援vue框架，可以使用parcel-plugin-vue外掛。具體使用檢視看parcel-plugin-vue的npm。

總的來說，Parcel確實比Webpack簡單方便很多，特別是省了各種轉換器和外掛的配置，節省了大部分工作量。不過從功能上來看目前Parcel還不及Webpack，如反向代理設定等，相信隨著使用Parcel的人越來越多，對應的外掛也會隨之開發出來。

相關文章