零配置構建工具：parcel

更多內容歡迎來到博客：https://imjianjian.github.io

爲何學習parcel

• 17年12月6日，parcel發佈了第一個正式版本，目前已經在GitHub上收穫了17.7k+個start。
• Parcel是一個Web應用程序打包器(bundler)，與以往使用過的前端構建工具對比，零配置彷佛很是具備優點。
• 官方表示parcel的打包速度在有cache的狀況下，打包速度幾乎是webpack的數倍（官方10倍，應該是最佳狀況0.0）

安裝

npm i -g parcel-bundler

打包

entry

parcel能夠用任何文件做爲打包入口，通常推薦使用html或js文件。

資源

parcel對js，css，html等特定文件有特殊的支持，parcel會自動分析文件中的依賴關係，相同類型的資源被組合在一塊兒成爲相同的輸出包。若是你在js文件中引入了其餘類型的文件（例如css）,那麼css依舊會被單獨打包，而不是做爲內聯一併打包到js中。html中的經過連接引入的文件（例如圖片，css，js文件）也會被提取並單獨打包。

parcel只是使用CommonJS和ES6的模塊語法來到如文件。css支持@import方式引入，

// 使用 CommonJS 語法導入模塊
const a = require('./a');

// 使用 ES6 import 語法導入模塊
import a from './a';

/* 導入另外一個 CSS 文件 */
@import './a.css';

轉換

如今前端項目中使用到的預處理語言及擴展語言愈來愈多，css預處理語言有less，sass，stylus等，javaScript的擴展語言有TypeScript，CoffeeScript等。還有pug，eje，jsx，vue等模板，須要在打包時進行轉換。

parcel中已經內置了不少常見的轉換和編譯器，也可使用插件來擴展。

在parcel中使用Babel，PostCSS，PostHTML的方式與其單獨使用或與其餘打包器配合使用的方式相同。

先安裝到項目中

npm i -D babel-preset-env
npm i -D postcss-modules autoprefixer
npm i -D posthtml-img-autosize

而後建立配置文件，例如.babelrc

{
  "presets": ["env"]
}

代碼拆分

若果要將代碼分割成多個單獨的包以節省加載時間。parcel使用動態import()函數來實現引入和懶加載。用這種方式引入會被拆分紅單獨的包而且按需加載。

import()和require()的使用類似，可是import返回的是一個Promise，這意味着它是異步的。

這能夠用在路由配置和頁面渲染中：

//vue路由
{
     path: 'home',
     component: () =>import('../pages/home.vue')
}
//頁面渲染
import('./pages/about').then(function (page) {
  // 渲染頁面
  page.render();
});

既然是Promise，這意味着咱們能夠結合Generator函數（async函數）;

// 設置頁面名稱到動態引入的映射中。
// 在使用前，這些頁面都不會被加載。
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
};

async function renderPage(page) {
  // 懶加載請求頁面。
  const page = await pages[page];
  return page.render();
}

開發和生產環境

開發模式

開發過程當中，使用如下命令，會開啓代碼監聽並打開parcel的內置服務器，在瀏覽器中打開localhost://1234,就能夠看到。也可使用-p命令修改默認端口

parcel index.html

若是有本身的服務器，你能夠在watch 模式下運行 Parcel 。當文件改變它仍然會自動從新構建並支持熱替換，可是不會啓動 web 服務。

parcel watch index.html

當你準備在生產模式下建立，build 模式會關閉監聽而且只創建一次。

生產模式

當須要綁定應用程序的時候，你可使用 Parcel 的生產模式。

parcel build index.html

這將關閉監聽模式和熱模塊替換，因此它只會編譯一次。它還會開啓 minifier 來減小輸出包文件的大小。Parcel 使用的 minifiers 有 JavaScript 的 uglify-es ，CSS 的 cssnano 還有 HTML 的 htmlnano。

啓動生產模式還要設置環境變量 NODE_ENV=production 。像 React 這種只用開發調試功能的大型庫，經過設置這個環境變量來禁用調試功能，從而構建得更小更快。

命令參數

• -p, --port <port> 設置服務器端口
• --https 在https協議上運行
• -o, --open 自動在默認瀏覽器打開
• -d, --out-dir <path> 設置輸入路徑默認爲dist
• --public-url <url> 設置服務器運行的路勁. 默認與--out-dir option 設置的相同
• --no-hmr 關閉熱模塊替換
• --no-cache 關閉緩存
• -V, --version 版本信息
• -h, --help 幫助信息

插件

Parcel 採用與許多其它工具稍微不一樣的策略，許多常見的格式都被開箱即用地包含進來，而不須要安裝或者配置額外的插件。然而，有些狀況你可能會想在非標準的狀況下擴展 Parcel 的能力，而那些時候，插件是被支持的。安裝的插件會基於 package.json 的依賴會被自動檢測並加載。parcel插件一般以"parcel-plugin-*"命名。

目前parcel的插件並很少，經常使用到的有：

• parcel-plugin-vue
• parcel-plugin-eslint
• parcel-plugin-inlinesvg
• parcel-plugin-pug
• parcel-plugin-typescript
• parcel-plugin-fable
• parcel-plugin-handlebars
• parcel-plugin-svelet
• parcel-plugin-elm
• parcel-plugin-markdown
• parcel-plugin-stylelint
• parcel-plugin-angular
• parcel-plugin-mustache

零配置打包vue

項目地址: https://github.com/w3c-king/p...