Parcel：常見技術棧的集成方式

作者：林鑫 2017-12-29 15:16:49

Parcel 是一個前端構建工具，Parcel 官網將它定義為極速零配置的Web應用打包工具。沒錯，又是一個構建工具，你一定會想，為什么前端的構建工具層出不窮，搞那么多工具又要花時間去學習，真的有意義嗎？在 webpack 已經成為前端構建工具主流的今天，一個新的工具能有什么優勢來站穩腳跟呢？

[[215124]]

前言

為什么要用 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>

運行命令 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 都替我們做好了，對于使用者來說，基本上也是零配置了。

【本文為51CTO專欄作者“林鑫”的原創稿件，轉載請通過微信公眾號聯系作者獲取授權】

戳這里，看該作者更多好文

責任編輯：武曉燕來源： 51CTO專欄

Parcel 集成方式