摘要：將處理所有相關的東西并且在上部署該文件。這里將使用上一節已經創建的文件。使用構建應用使用構建同樣非常簡單。使用構建包如要使用打包項目，只需在終端中執行命令，即可在項目目錄中得到文件夾。其在社區也得到了廣泛的使用。

譯者注：最近看到 Poi 這個也是打著零配置特點（Parcel：莫名躺槍？）的 JavaScript 打包工具，發現其在 Github 有著 3000+ Star 的同時在中文世界里熱度卻較低，因此在 Medium 上找了一篇文章翻譯過來，方便大家了解之。
原文地址：https://blog.bitsrc.io/build-...

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

Poi 是一個零配置的基于 Webpack 的打包器。零配置并不是指項目完全不需要配置，而是 Poi 已經為我們配置好了大量內容。

本文將展示如何構建你的 JavaScript 應用，如何用 Webpack 進行打包以及用 Poi 進行配置。

使用 Poi 部署一個 JavaScript 單文件非常簡單。Poi 能夠啟動一個開發服務器并且能夠在文件發生變化時自動重載頁面。

首先，在系統中安裝 Poi。

$ npm i -g poi

然后，新建一個項目目錄。

$ mkdir js-app
$ cd js-app

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

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

這里 document.getElementById 獲取 id 名為“app”的 div,其將由 Poi 創建。在該 div 內部是一句簡單的“Hello World”。

為了在瀏覽器中啟動該文件，打開終端并且執行命令 poi。Poi 將處理所有 webpack 相關的東西并且在 localhost:4000 上部署該文件。

如果你將 index.js 放置在其他文件夾，比如 src，那你需要執行命令 poi src/index.js 來在開發服務器上啟動該文件。

盡管 Poi 為我們的應用提供了現成的 HTML 模板，我們仍然可以按照自己的喜歡定制它。下面將展示如何使用 Poi 定制 HTML 頁面中的 head 標簽。

在項目目錄中新建一個名為 index.ejs 的新文件，其代碼如下：

再次執行命令 poi 將會得到一個標題更新了的新頁面。如果你用瀏覽器開發工具檢查頁面，可以看到 head 標簽也經過了定制化，同時 webpack 仍然將所有腳本注入了頁面。

上面配置 HTML 模板的方法對簡單的 JavaScript 頁面來說還比較好用，但是很快你就會需要一個能夠配置更多選項的方法。這時候就可以介紹 poi.config.js 了。

首先在項目目錄下新建 poi.config.js 文件。其使用 module.exports 導出一個配置對象：

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 用于定義頁面的標題的描述內容。template 選項用來告訴 Poi 將定制選項導出到哪里。

這里將使用上一節已經創建的 index.ejs 文件。現在將其內容修改為只包含一個 div 元素：

我們需要在頁面 body 中渲染 text 和 author 選項。在 index.ejs 內輸入以下代碼：

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

  <%= text%>


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

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

這里我們在模板中使用了 Underscore 和 Lodash 來獲取 text 和 author 選項。

我們修改了配置，因此需要重新執行命令 poi 來查看頁面的變化。

注意這應該只被用來配置你的項目。數據之類的東西應該留給 JavaScript 來處理。

Poi 的一大優勢在于我們可以在不必安裝 Vue 作為依賴的情況下用它來構建 Vue 應用。

這是由于 Poi 的開發者同時也是 Vue 的核心開發者之一，因此 Poi 默認已配置好可與 Vue 共同使用。

刪除項目目錄中的所有文件。創建一個新的 index.js 文件并且引入 Vue 包。

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

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

重新執行命令 poi 然后你將看到一個完整的 Vue 應用在運行！

注意：如遇到“模塊未發現”的錯誤提示，則在項目中安裝 Vue 依賴。

使用 Poi 構建 React 同樣非常簡單。我們所需要做的就是安裝 react 和 react-dom 包，以及配置 Babel 來處理代碼。

首先，在項目中安裝 react 和 react-dom。

$ yarn add react react-dom

在配置 Babel 之前，我們需要安裝一些開發依賴。

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

然后創建名為 .babelrc 的文件，內容如下：

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

現在，你就可以編寫你的 React 應用了！

在使用 Poi 構建的 React 應用中引入 CSS 樣式十分簡單。在項目目錄下創建一個 .css 文件然后在 .js 文件中編寫引入聲明即可。

但是如果使用 .scss 文件來創建樣式，那么就需要安裝一些依賴。

打開終端然后使用 NPM/Yarn 安裝 node-sass 和 sass-loader：

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

安裝完畢后，重新執行命令 poi，可以看到樣式已經加載到 React 應用中！

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

當然，Poi 也無法覆蓋到所有 webpack loader。下面的例子展示了通過添加 react-markdown-loader 到 Poi 可以將 Markdown 文件加載為 React 組件。我們可以通過這個例子來看看如何手動添加 Webpack loader。

在項目目錄下創建名為 page.md 的新文件并在該文件中隨意書寫 markdown 格式的內容。

為了使 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
  }
}

當然，確保你已經在項目中安裝 react-markdown-loader。

經過以上處理后，在 index.js 中引入 markdown 頁面并且在渲染函數中將其以 React 組件的形式調用。

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

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

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

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

你可以使用命令 http-server dist 啟動 dist 文件夾。改命令將在 localhost:8080 上啟動項目。

如需分析你的項目，首先安裝開發依賴 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 參數使得 analyze 函數可通過 options.analyze 來配置是否使用。因此，只有執行命令 poi build --analyze，Poi 才會執行 BundleAnalyzer 插件。

之前提到，Poi 內置了 Vue 預設配置。除此之外，Poi 還提供了其他一些預設配置來讓我們安裝一些流行的庫，比如 Elm，React，Storybook，TypeScript 等。

在終端中執行以下命令來在項目中安裝 poi-preset：

$ yarn add @poi/plugin- --dev

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

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

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

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

如果你正在構建的應用具有許多非代碼類的靜態資源，Webpack 能提供很大幫助。

另一方面，其他打包工具比如 Grunt 和 Gulp，并沒有依賴關系圖的概念。

Webpack 具有很多的優點，因此它可能是你的項目的絕佳選擇。其在 React 社區也得到了廣泛的使用。

而 Poi 為我們提供了一種 “自由配置” 的方式來啟動 JavaScript 項目，這簡直就是錦上添花了！

本文首發于我的博客（點此查看），歡迎關注。