【譯】使用 Webpack 和 Poi 構建更好的 JavaScript 應用

時間 2019-12-04

標籤使用 webpack poi 構建更好 javascript 應用欄目 Apache 简体版

原文原文鏈接

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

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

Poi 是一個零配置的基於 Webpack 的打包器。零配置並非指項目徹底不須要配置，而是 Poi 已經爲咱們配置好了大量內容。html

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

使用 Poi 啓動一個簡單的 JavaScript 文件

使用 Poi 部署一個 JavaScript 單文件很是簡單。Poi 可以啓動一個開發服務器而且可以在文件發生變化時自動重載頁面。java

首先，在系統中安裝 Poi。node

$ npm i -g poi

而後，新建一個項目目錄。react

$ mkdir js-app
$ cd js-app

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

document.getElementById ('app').innerHTML = `
  <h1>Hello world!</h1>
`;

這裏 document.getElementById 獲取 id 名爲「app」的 div,其將由 Poi 建立。在該 div 內部是一句簡單的「Hello World」。git

爲了在瀏覽器中啓動該文件，打開終端而且執行命令 poi。Poi 將處理全部 webpack 相關的東西而且在 localhost:4000 上部署該文件。github

若是你將 index.js 放置在其餘文件夾，好比 src，那你須要執行命令 poi src/index.js 來在開發服務器上啓動該文件。

使用 Poi 定製 HTML 模板

儘管 Poi 爲咱們的應用提供了現成的 HTML 模板，咱們仍然能夠按照本身的喜歡定製它。下面將展現如何使用 Poi 定製 HTML 頁面中的 head 標籤。

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Running JavaScript Apps with POI</title>
  </head>
  <body>
    <div id="app"></app>
  </body>
</html>

再次執行命令 poi 將會獲得一個標題更新了的新頁面。若是你用瀏覽器開發工具檢查頁面，能夠看到 head 標籤也通過了定製化，同時 webpack 仍然將全部腳本注入了頁面。

使用 poi.config.js 配置 Poi

上面配置 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 元素：

<div id="app"></div>

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

<% const {text, author} = htmlWebpackPlugin.options %>
<h1>
  <%= text%>
</h1>
<ul>
  <% _.forEach(author, a => { %>
    <li>
      <%- a %>
    </li>
  <% })%>
</ul>

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

咱們修改了配置，所以須要從新執行命令 poi 來查看頁面的變化。

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

使用 Poi 構建 Vue 應用

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 文件中的代碼：

<template>
  <h1>{{message}}</h1>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Running Vue App with Poi!!',
      };
    },
  };
</script>

從新執行命令 poi 而後你將看到一個完整的 Vue 應用在運行！

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

使用 Poi 構建 React 應用

使用 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 中編譯樣式

在使用 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 應用中！

手動添加 Webpack Loader

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(<Page />, document.getElementById("app"));

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

使用 Poi 構建 JavaScript 包

如要使用 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 Presets 來跳過配置

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

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

$ yarn add @poi/plugin-<libary-name> --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 項目，這簡直就是錦上添花了！

本文首發於個人博客（點此查看），歡迎關注。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。