摘要：將處理所有相關(guān)的東西并且在上部署該文件。這里將使用上一節(jié)已經(jīng)創(chuàng)建的文件。使用構(gòu)建應(yīng)用使用構(gòu)建同樣非常簡(jiǎn)單。使用構(gòu)建包如要使用打包項(xiàng)目，只需在終端中執(zhí)行命令，即可在項(xiàng)目目錄中得到文件夾。其在社區(qū)也得到了廣泛的使用。

譯者注：最近看到 Poi 這個(gè)也是打著零配置特點(diǎn)（Parcel：莫名躺槍?zhuān)浚┑?JavaScript 打包工具，發(fā)現(xiàn)其在 Github 有著 3000+ Star 的同時(shí)在中文世界里熱度卻較低，因此在 Medium 上找了一篇文章翻譯過(guò)來(lái)，方便大家了解之。
原文地址：https://blog.bitsrc.io/build-...

Webpack 是一個(gè)將你所有的 JavaScript 文件，圖片、字庫(kù)以及 CSS 等打包到一個(gè)依賴(lài)關(guān)系圖的構(gòu)建工具。這使得你可以在源碼中使用 require() 來(lái)引用本地文件并且決定在最終的 JavaScript 包中如何處理這些本地文件代碼。

Poi 是一個(gè)零配置的基于 Webpack 的打包器。零配置并不是指項(xiàng)目完全不需要配置，而是 Poi 已經(jīng)為我們配置好了大量?jī)?nèi)容。

本文將展示如何構(gòu)建你的 JavaScript 應(yīng)用，如何用 Webpack 進(jìn)行打包以及用 Poi 進(jìn)行配置。

使用 Poi 部署一個(gè) JavaScript 單文件非常簡(jiǎn)單。Poi 能夠啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器并且能夠在文件發(fā)生變化時(shí)自動(dòng)重載頁(yè)面。

首先，在系統(tǒng)中安裝 Poi。

$ npm i -g poi

然后，新建一個(gè)項(xiàng)目目錄。

$ mkdir js-app
$ cd js-app

在該目錄下新建 index.js 文件：

document.getElementById ("app").innerHTML = `
  
Hello world!
`;

這里 document.getElementById 獲取 id 名為“app”的 div,其將由 Poi 創(chuàng)建。在該 div 內(nèi)部是一句簡(jiǎn)單的“Hello World”。

為了在瀏覽器中啟動(dòng)該文件，打開(kāi)終端并且執(zhí)行命令 poi。Poi 將處理所有 webpack 相關(guān)的東西并且在 localhost:4000 上部署該文件。

如果你將 index.js 放置在其他文件夾，比如 src，那你需要執(zhí)行命令 poi src/index.js 來(lái)在開(kāi)發(fā)服務(wù)器上啟動(dòng)該文件。

盡管 Poi 為我們的應(yīng)用提供了現(xiàn)成的 HTML 模板，我們?nèi)匀豢梢园凑兆约旱南矚g定制它。下面將展示如何使用 Poi 定制 HTML 頁(yè)面中的 head 標(biāo)簽。

在項(xiàng)目目錄中新建一個(gè)名為 index.ejs 的新文件，其代碼如下：

再次執(zhí)行命令 poi 將會(huì)得到一個(gè)標(biāo)題更新了的新頁(yè)面。如果你用瀏覽器開(kāi)發(fā)工具檢查頁(yè)面，可以看到 head 標(biāo)簽也經(jīng)過(guò)了定制化，同時(shí) webpack 仍然將所有腳本注入了頁(yè)面。

上面配置 HTML 模板的方法對(duì)簡(jiǎn)單的 JavaScript 頁(yè)面來(lái)說(shuō)還比較好用，但是很快你就會(huì)需要一個(gè)能夠配置更多選項(xiàng)的方法。這時(shí)候就可以介紹 poi.config.js 了。

首先在項(xiàng)目目錄下新建 poi.config.js 文件。其使用 module.exports 導(dǎo)出一個(gè)配置對(duì)象：

module.exports = {
  html: {
    title: "Running JavaScript Apps with Poi",
    description: "Customize how to render the main template using configuration settings.",
    template: "./index.ejs",
    text: "Running JavaScript Apps with Poi",
    author: ["Rajat"],
  },
};

·title 和 description 用于定義頁(yè)面的標(biāo)題的描述內(nèi)容。template 選項(xiàng)用來(lái)告訴 Poi 將定制選項(xiàng)導(dǎo)出到哪里。

這里將使用上一節(jié)已經(jīng)創(chuàng)建的 index.ejs 文件?，F(xiàn)在將其內(nèi)容修改為只包含一個(gè) div 元素：

我們需要在頁(yè)面 body 中渲染 text 和 author 選項(xiàng)。在 index.ejs 內(nèi)輸入以下代碼：

<% const {text, author} = htmlWebpackPlugin.options %>

  <%= text%>


  <% _.forEach(author, a => { %>
    

      <%- a %>
    
  <% })%>

這里我們?cè)谀０逯惺褂昧?Underscore 和 Lodash 來(lái)獲取 text 和 author 選項(xiàng)。

我們修改了配置，因此需要重新執(zhí)行命令 poi 來(lái)查看頁(yè)面的變化。

注意這應(yīng)該只被用來(lái)配置你的項(xiàng)目。數(shù)據(jù)之類(lèi)的東西應(yīng)該留給 JavaScript 來(lái)處理。

Poi 的一大優(yōu)勢(shì)在于我們可以在不必安裝 Vue 作為依賴(lài)的情況下用它來(lái)構(gòu)建 Vue 應(yīng)用。

這是由于 Poi 的開(kāi)發(fā)者同時(shí)也是 Vue 的核心開(kāi)發(fā)者之一，因此 Poi 默認(rèn)已配置好可與 Vue 共同使用。

刪除項(xiàng)目目錄中的所有文件。創(chuàng)建一個(gè)新的 index.js 文件并且引入 Vue 包。

import Vue from "vue";
import App from "./App.vue";
new Vue ({
  el: "#app",
  render: h => h(App),
});

上面的代碼片段中，我們從 App.vue 文件中引入了 App 組件，然后創(chuàng)建了 Vue 的一個(gè)實(shí)例并且掛載到 id 為 app 的 div 元素上。render 函數(shù)將渲染 App.vue 文件中的代碼：

重新執(zhí)行命令 poi 然后你將看到一個(gè)完整的 Vue 應(yīng)用在運(yùn)行！

注意：如遇到“模塊未發(fā)現(xiàn)”的錯(cuò)誤提示，則在項(xiàng)目中安裝 Vue 依賴(lài)。

使用 Poi 構(gòu)建 React 同樣非常簡(jiǎn)單。我們所需要做的就是安裝 react 和 react-dom 包，以及配置 Babel 來(lái)處理代碼。

首先，在項(xiàng)目中安裝 react 和 react-dom。

$ yarn add react react-dom

在配置 Babel 之前，我們需要安裝一些開(kāi)發(fā)依賴(lài)。

$ yarn add babel-preset-react-app babel-plugin-react-require -D

然后創(chuàng)建名為 .babelrc 的文件，內(nèi)容如下：

{
  "presets": ["react-app"],
  "plugins": ["react-require"]
}

現(xiàn)在，你就可以編寫(xiě)你的 React 應(yīng)用了！

在使用 Poi 構(gòu)建的 React 應(yīng)用中引入 CSS 樣式十分簡(jiǎn)單。在項(xiàng)目目錄下創(chuàng)建一個(gè) .css 文件然后在 .js 文件中編寫(xiě)引入聲明即可。

但是如果使用 .scss 文件來(lái)創(chuàng)建樣式，那么就需要安裝一些依賴(lài)。

打開(kāi)終端然后使用 NPM/Yarn 安裝 node-sass 和 sass-loader：

$ yarn add node-sass sass-loader
// or
$ npm i node-sass sass-loader

安裝完畢后，重新執(zhí)行命令 poi，可以看到樣式已經(jīng)加載到 React 應(yīng)用中！

Poi 是真的牛。它讓你不用再進(jìn)行任何定制化或者配置就能使用大量的 webpack loader。

當(dāng)然，Poi 也無(wú)法覆蓋到所有 webpack loader。下面的例子展示了通過(guò)添加 react-markdown-loader 到 Poi 可以將 Markdown 文件加載為 React 組件。我們可以通過(guò)這個(gè)例子來(lái)看看如何手動(dòng)添加 Webpack loader。

在項(xiàng)目目錄下創(chuàng)建名為 page.md 的新文件并在該文件中隨意書(shū)寫(xiě) markdown 格式的內(nèi)容。

為了使 Poi 能夠處理 markdown 文件，我們需要添加合適的 loader。

在 poi.config.js 中添加 webpack 屬性，如下所示：

module.exports = {
  webpack(config){
    config.module.rules.push({
      test: /.md$/,
      loaders: [
        "babel-loader",        
        "react-markdown-loader"
      ] 
    })  
    return config
  }
}

當(dāng)然，確保你已經(jīng)在項(xiàng)目中安裝 react-markdown-loader。

經(jīng)過(guò)以上處理后，在 index.js 中引入 markdown 頁(yè)面并且在渲染函數(shù)中將其以 React 組件的形式調(diào)用。

import {render} from "react-dom"
import Page from "./page.md"

render(, document.getElementById("app"));

重新執(zhí)行命令 poi，markdown 文件將正常在瀏覽器算加載。

如要使用 Poi 打包 JavaScript 項(xiàng)目，只需在終端中執(zhí)行命令 poi build，即可在項(xiàng)目目錄中得到 dist文件夾。

你可以使用命令 http-server dist 啟動(dòng) dist 文件夾。改命令將在 localhost:8080 上啟動(dòng)項(xiàng)目。

如需分析你的項(xiàng)目，首先安裝開(kāi)發(fā)依賴(lài) webpack-bundle-analyzer：

yarn add webpack-bundle-analyzer -D

然后將其加入到 poi.config.js，如下所示：

const BundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

module.exports = options => ({
  webpack (config) {
    if(options.analyze){
      config.plugins.push(
        new BundleAnalyzer()
      )
    }
    config.module.rules.push ({
      test: /.md$/,
      loaders: ["babel-loader", "react-markdown-loader"],
    });
    return config;
  },
})

options 參數(shù)使得 analyze 函數(shù)可通過(guò) options.analyze 來(lái)配置是否使用。因此，只有執(zhí)行命令 poi build --analyze，Poi 才會(huì)執(zhí)行 BundleAnalyzer 插件。

之前提到，Poi 內(nèi)置了 Vue 預(yù)設(shè)配置。除此之外，Poi 還提供了其他一些預(yù)設(shè)配置來(lái)讓我們安裝一些流行的庫(kù)，比如 Elm，React，Storybook，TypeScript 等。

在終端中執(zhí)行以下命令來(lái)在項(xiàng)目中安裝 poi-preset：

$ yarn add @poi/plugin- --dev

所以如果你想在項(xiàng)目中安裝 Elm，需要輸入的命令是 yarn add @poi/plugin-elm --dev。

使用該插件需要在 poi.config.js 中編寫(xiě)以下代碼：

module.exports = {
  plugins: [
    require("@poi/plugin-elm")(options)
  ]
}

想要了解如何使用其他 poi-presets，查閱 https://github.com/egoist/poi... 即可。

如果你正在構(gòu)建的應(yīng)用具有許多非代碼類(lèi)的靜態(tài)資源，Webpack 能提供很大幫助。

另一方面，其他打包工具比如 Grunt 和 Gulp，并沒(méi)有依賴(lài)關(guān)系圖的概念。

Webpack 具有很多的優(yōu)點(diǎn)，因此它可能是你的項(xiàng)目的絕佳選擇。其在 React 社區(qū)也得到了廣泛的使用。

而 Poi 為我們提供了一種 “自由配置” 的方式來(lái)啟動(dòng) JavaScript 項(xiàng)目，這簡(jiǎn)直就是錦上添花了！

本文首發(fā)于我的博客（點(diǎn)此查看），歡迎關(guān)注。