Parcel：常見(jiàn)技術(shù)棧的集成方式

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

Parcel 是一個(gè)前端構(gòu)建工具，Parcel 官網(wǎng) 將它定義為極速零配置的Web應(yīng)用打包工具。沒(méi)錯(cuò)，又是一個(gè)構(gòu)建工具，你一定會(huì)想，為什么前端的構(gòu)建工具層出不窮，搞那么多工具又要花時(shí)間去學(xué)習(xí)，真的有意義嗎？在 webpack 已經(jīng)成為前端構(gòu)建工具主流的今天，一個(gè)新的工具能有什么優(yōu)勢(shì)來(lái)站穩(wěn)腳跟呢？

[[215124]]

前言

為什么要用 Parcel

一個(gè)好的打包工具在前端工程中占著比較重要的地位。然，何謂之好？或功能強(qiáng)大，或簡(jiǎn)單易用，或提高效率，或適合自己。在時(shí)代不斷發(fā)展中，一個(gè)個(gè)好的工具正在被一個(gè)更好的工具所替代。隨著對(duì) webpack 復(fù)雜配置的吐槽聲越來(lái)越多，Parcel 打著 “快速、零配置” 的旗子出來(lái)了。

Parcel 的特性

快速打包：?jiǎn)⒂枚嗪司幾g，并具有文件系統(tǒng)緩存
打包所有資源：支持JS，CSS，HTML，文件資源等等 - 不需要安裝任何插件
自動(dòng)轉(zhuǎn)換：使用 Babel，PostCSS 和 PostHTML 自動(dòng)轉(zhuǎn)換
零配置代碼拆分：使用動(dòng)態(tài) import() 語(yǔ)法拆分您的輸出包，只加載初始加載時(shí)所需的內(nèi)容
模塊熱替換：不需要進(jìn)行任何配置
友好的錯(cuò)誤記錄：以語(yǔ)法高亮的形式打印的代碼幀，以幫助你查明問(wèn)題

如何使用

快速使用

全局安裝 npm i parcel-bundler -g 或 yarn add parcel-bundler global

Parcel 使用一個(gè)文件作為入口，***是 HTML 或 JavaScript 文件，我們?cè)陧?xiàng)目中新建 index.html 文件，直接運(yùn)行命令 parcel index.html 即可啟動(dòng)本地服務(wù)器

在瀏覽器中訪問(wèn) http://localhost:1234/ ，可以通過(guò) parcel index.html -p 8888 重新設(shè)置端口號(hào)。

無(wú)需配置文件！

Parcel 支持 CommonJS 模塊語(yǔ)法、ES6 模塊語(yǔ)法、在 js 文件中導(dǎo)入 node 模塊或 css、在 css 中使用 import 等，也都無(wú)需配置文件！

<!-- 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 模塊語(yǔ)法 
import main2 from './main2.js';         // 支持 ES6 模塊語(yǔ)法 
import '../css/index.css';              // 支持在 js 中導(dǎo)入 css 
main1(); 
main2();

上面只是簡(jiǎn)單的使用了 Parcel，但在實(shí)際項(xiàng)目中，我們會(huì)用到各種技術(shù)棧，下面我們來(lái)看看 Parcel 如何集成各種技術(shù)棧的。

注意：Parcel 里使用了 async await，因此需要 node 7.6 以上的版本才支持

集成技術(shù)棧

首先在項(xiàng)目下創(chuàng)建 package.json 、.babelrc、以及 index-react.html、index-vue.html、index-ts.html 三個(gè)作為各自技術(shù)棧 demo 的入口文件。

在 package.json 中添加以下命令

"scripts": { 
  "react": "parcel index-react.html", 
  "vue": "parcel index-vue.html", 
  "ts": "parcel index-ts.html" 
}

React

安裝 React 的相關(guān)依賴 npm i -S parcel-bundler react react-dom babel-preset-env babel-preset-react

在 .babelrc 中添加

{ 
  "presets": ["env","react"] 
}

這就是上面講到的 Parcel 的特性：自動(dòng)轉(zhuǎn)換。該文件是讓 Parcel 自動(dòng)轉(zhuǎn)換 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>

運(yùn)行命令 npm run react 打開(kāi) http://localhost:1234/ 即可看到 Hello React

Vue

就在不久前，Parcel 終于支持 .vue 文件了，只需要引入一個(gè)包 parcel-plugin-vue，不需要任何配置，即可打包 Vue 了。

安裝 Vue 相關(guān)依賴，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>

運(yùn)行命令 npm run vue 打開(kāi) http://localhost:1234/ 即可看到 Hello Vue

TypeScript

集成 TypeScript 也非常簡(jiǎn)單，只需要安裝 typescript 模塊即可，也無(wú)需配置。

安裝 TypeScript 相關(guān)依賴，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'});

運(yùn)行命令 npm run ts 打開(kāi) http://localhost:1234/ 即可看到 Hello TypeScript

Sass

將 Sass 在上面技術(shù)棧中使用也非常簡(jiǎn)單，只需要安裝 node-sass 模塊即可，也無(wú)需配置。

安裝 Sass 相關(guān)依賴，npm 可能會(huì)下載不成功，這里使用 cnpm 來(lái)安裝，cnpm i -S node-sass

在 src/vue/app.vue 中來(lái)使用 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; 
    } 
}

再次運(yùn)行命令 npm run vue 即可看到帶有藍(lán)色字體的 Hello Vue

以上的 demo 源碼地址：parcel-demo

生產(chǎn)環(huán)境

設(shè)置環(huán)境變量： parcel build index.html NODE_ENV=production
設(shè)置輸出目錄： parcel build index.html -d build/output
設(shè)置要提供服務(wù)的公共 URL： parcel build index.html --public-url ./
禁用壓縮： parcel build index.html --no-minify
禁用文件系統(tǒng)緩存： parcel build index.html --no-cache

疑問(wèn)

輸出目錄里是否可以再分子目錄，例如 css / js / img 等？
頁(yè)面引用的 html 被打包后也會(huì)重命名成很長(zhǎng)的一串，是否可以不重命名？

前端情報(bào)局

鑒于最近 Parcel 打著零配置的口號(hào)俘獲了不少前端開(kāi)發(fā)者的心，并且伴隨著吐槽 webpack 使用配置復(fù)雜的聲音。webpack 核心開(kāi)發(fā)者特意解釋道，webpack v4.0.0-alpha.1 中加入了 mode 這個(gè)配置，這使得很多復(fù)雜繁瑣的配置（諸如： sourcemaps、 tree shaking,、minification、scope hoisting）webpack 都替我們做好了，對(duì)于使用者來(lái)說(shuō)，基本上也是零配置了。

【本文為51CTO專欄作者“林鑫”的原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)通過(guò)微信公眾號(hào)聯(lián)系作者獲取授權(quán)】

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

責(zé)任編輯：武曉燕來(lái)源： 51CTO專欄