前言
Parcel 是什么
Parcel 是一個前端構建工具，Parcel 官網 將它定義為極速零配置的Web應用打包工具。沒錯，又是一個構建工具，你一定會想，為什么前端的構建工具層出不窮，搞那么多工具又要花時間去學習，真的有意義嗎？在 webpack 已經成為前端構建工具主流的今天，一個新的工具能有什么優勢來站穩腳跟呢？
為什么要用 Parcel
一個好的打包工具在前端工程中占着比較重要的地位。然，何謂之好？或功能強大，或簡單易用，或提高效率，或適合自己。在時代不斷發展中，一個個好的工具正在被一個更好的工具所替代。隨着對 webpack 復雜配置的吐槽聲越來越多，Parcel 打着 "快速、零配置" 的旗子出來了。
Parcel 的特性
- 快速打包：啟用多核編譯，並具有文件系統緩存
- 打包所有資源：支持JS，CSS，HTML，文件資源等等 - 不需要安裝任何插件
- 自動轉換：使用 Babel，PostCSS 和 PostHTML 自動轉換
- 零配置代碼拆分：使用動態 import() 語法拆分您的輸出包，只加載初始加載時所需的內容
- 模塊熱替換：不需要進行任何配置
- 友好的錯誤記錄：以語法高亮的形式打印的代碼幀，以幫助你查明問題
如何使用
快速使用
全局安裝 npm i parcel-bundler -g 或 yarn add parcel-bundler global
Parcel 使用一個文件作為入口，最好是 HTML 或 JavaScript 文件，我們在項目中新建 index.html 文件，直接運行命令 parcel index.html 即可啟動本地服務器
在瀏覽器中訪問 http://localhost:1234/ ，可以通過 parcel index.html -p 8888 重新設置端口號。
無需配置文件！
Parcel 支持 CommonJS 模塊語法、ES6 模塊語法、在 js 文件中導入 node 模塊或 css、在 css 中使用 import 等，也都無需配置文件！
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parcel</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Hello Parcel</h1>
<script src="src/js/index.js"></script>
</body>
</html>
// src/js/index.js
const main1 = require('./main1.js'); // 支持 CommonJS 模塊語法
import main2 from './main2.js'; // 支持 ES6 模塊語法
import '../css/index.css'; // 支持在 js 中導入 css
main1();
main2();
上面只是簡單的使用了 Parcel，但在實際項目中，我們會用到各種技術棧，下面我們來看看 Parcel 如何集成各種技術棧的。
注意：Parcel 里使用了 async await，因此需要 node 7.6 以上的版本才支持
集成技術棧
首先在項目下創建 package.json 、.babelrc、以及 index-react.html、index-vue.html、index-ts.html 三個作為各自技術棧 demo 的入口文件。
在 package.json 中添加以下命令
"scripts": {
"react": "parcel index-react.html",
"vue": "parcel index-vue.html",
"ts": "parcel index-ts.html"
}
React
安裝 React 的相關依賴 npm i -S parcel-bundler react react-dom babel-preset-env babel-preset-react
在 .babelrc 中添加
{
"presets": ["env","react"]
}
這就是上面講到的 Parcel 的特性：自動轉換。該文件是讓 Parcel 自動轉換 ES6 和 React JSX。
<!-- index-react.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parcel React</title>
<meta charset="UTF-8">
</head>
<body>
<div id="react-app"></div>
<script src="src/react/index.js"></script>
</body>
</html>
// src/react/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Hello extends Component {
render() {
return <h1>Hello React</h1>;
}
}
ReactDOM.render(<Hello />, document.getElementById('react-app'));
運行命令 npm run react 打開 http://localhost:1234/ 即可看到 Hello React
Vue
就在不久前，Parcel 終於支持 .vue 文件了，只需要引入一個包 parcel-plugin-vue，不需要任何配置，即可打包 Vue 了。
安裝 Vue 相關依賴，npm i -S vue parcel-plugin-vue
<!-- index-vue.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parcel Vue</title>
<meta charset="UTF-8">
</head>
<body>
<div id="vue-app"></div>
<script src="src/vue/index.js"></script>
</body>
</html>
// src/vue/index.js
import Vue from 'vue';
import App from './app.vue';
new Vue({
el: '#vue-app',
render: h => h(App)
})
<!-- src/vue/app.vue -->
<template>
<div>
<h1>Hello Vue</h1>
</div>
</template>
運行命令 npm run vue 打開 http://localhost:1234/ 即可看到 Hello Vue
TypeScript
集成 TypeScript 也非常簡單，只需要安裝 typescript 模塊即可，也無需配置。
安裝 TypeScript 相關依賴，npm i -S typescript
<!-- index-ts.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parcel TypeScript</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="ts-app"></h1>
<script src="src/typescript/index.ts"></script>
</body>
</html>
interface Name {
value: string;
}
function showName(name: Name){
document.getElementById('ts-app').innerHTML = 'Hello ' + name.value;
}
showName({value: 'TypeScript'});
運行命令 npm run ts 打開 http://localhost:1234/ 即可看到 Hello TypeScript
Sass
將 Sass 在上面技術棧中使用也非常簡單，只需要安裝 node-sass 模塊即可，也無需配置。
安裝 Sass 相關依賴，npm 可能會下載不成功，這里使用 cnpm 來安裝，cnpm i -S node-sass
在 src/vue/app.vue 中來使用 Sass
<!-- src/vue/app.vue -->
<template>
<div class="main">
<h1>Hello Vue</h1>
</div>
</template>
<style lang="scss">
@import '../sass/main.scss';
</style>
.main{
h1{
color: #0099ff;
}
}
再次運行命令 npm run vue 即可看到帶有藍色字體的 Hello Vue
以上的 demo 源碼地址：parcel-demo
生產環境
- 設置環境變量：
parcel build index.html NODE_ENV=production - 設置輸出目錄：
parcel build index.html -d build/output - 設置要提供服務的公共 URL：
parcel build index.html --public-url ./ - 禁用壓縮：
parcel build index.html --no-minify - 禁用文件系統緩存：
parcel build index.html --no-cache
疑問
- 輸出目錄里是否可以再分子目錄，例如 css / js / img 等？
- 頁面引用的 html 被打包后也會重命名成很長的一串，是否可以不重命名？
前端情報局
鑒於最近 Parcel 打着零配置的口號俘獲了不少前端開發者的心，並且伴隨着吐槽 webpack 使用配置復雜的聲音。webpack 核心開發者特意解釋道，webpack v4.0.0-alpha.1 中加入了 mode 這個配置，這使得很多復雜繁瑣的配置（諸如： sourcemaps、 tree shaking,、minification、scope hoisting）webpack 都替我們做好了，對於使用者來說，基本上也是零配置了。