用webpack寫個現代的JavaScript包

時間 2019-12-12

標籤 webpack 現代 javascript 欄目 JavaScript 简体版

原文原文鏈接

webpack 做爲目前主流的構建工具，其較快的版本迭代和複雜的配置方式，使得每次開發前不得不規劃至關部分時間來調試。這裏將記錄整個環境的搭建過程，爲新手提供基礎思路。vue

就像我在開發vue-sitemap時同樣，構建工具每每須要達到下面幾個需求：node

構建生成 CommonJS/UMD/ES Modules 三種模式的代碼提供給使用者
需運行測試和檢查測試覆蓋的進度
開發時候使用 VS Code 編輯器進行斷點調試

以上三個做爲開發一個組件(package)是基礎中基礎的需求，固然還有更多細節內容須要添加，因爲篇幅過長另加文章再說吧。（歡迎各位讀者評論留下你認爲須要的功能( • ̀ω•́ )✧）webpack

第一步：構建工具

接下來咱們先從最基礎的開始，須要安裝 Node.js(10.x) 做爲全部代碼的運行環境， webpack 也是同樣。git

初始化項目

因爲我須要把項目發佈至 npm 的，使用命令初始化項目描述文件 package.jsongithub

npm init

初次化細節各位讀者找其餘文章補全吧，這裏不細說

接下來看看目錄結構web

│  package.json     //項目描述文件
│  README.md        //GitHub建立倉庫時默認建立
├─src               //源代碼目錄
│      index.js     //入口文件
├─tests             //測試代碼目錄
│
├─dist              //生產文件的目錄
│
└─docs              //文檔目錄

添加 webpack

npm install -D webpack webpack-cli cross-env
//or
//yarn add webpack webpack-cli cross-env -D

這裏使用的 webpack v4，後續設置也是基於4來設置， cross-env是幫助在 win 下能正常使用環境變量的包，我開發在 win 環境因而在這加上。
yarn 是一款快速、可靠、安全的依賴管理工具。若是你以爲 npm 安裝時候較慢的話，不妨試試。npm

等依賴下載解決完畢以後，，在package.json設置構建命令方便以後使用。json

//# package.json
{
  //...
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --propress --hide-modules",
  }
}

這裏咱們能夠嘗試運行一下命令npm run build嘗試可否構建成功，成功的狀況下在dist目錄下會生成main.js的文件。promise

配置 webpack

建立 webpack.config.js文件來配置 webpack 。爲知足咱們的第一個須要生成三種模式的代碼：安全

//# webpack.config.js

const package = require('./package.json')
const path = require('path')

const config = {
    entry: "./src/index.js",  //入口文件
    output: {                 //輸出設置
        path: path.resolve(__dirname, "./dist"),
        filename: `${package.name}.js`
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src")
        }
    }
}

if (process.env.NODE_ENV === "umd") {
    config.optimization = { minimize: false };
    config.output.library = package.name;
    config.output.libraryTarget = "umd2";
    config.output.filename = `${package.name}.js`;
}
if (process.env.NODE_ENV === "umd:min") {
    config.output.library = package.name;
    config.output.libraryTarget = 'umd2';
    config.output.filename = `${package.name}.min.js`;
}
if (process.env.NODE_ENV === "es") {
    config.output.library = package.name;
    config.output.libraryTarget = "amd";
    config.output.filename = `${package.name}.es.js`;
}
if (process.env.NODE_ENV === "commonjs") {
    config.output.library = package.name;
    config.output.libraryTarget = "commonjs2";
    config.output.filename = `${package.name}.common.js`;
}

module.exports = config

添加構建命令

爲 package.json 添加新的運行命令

//# package.json
{
  "version": "0.1.0",
  "name": "vscode-mocha-webpack-example",
  "description": "用於管理導航、麪包屑及路由等基於vue的功能整合",
  "main": "./src/index.js",
  "scripts": {
    "build": "npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd:min",
    "build:umd": "cross-env NODE_ENV=umd webpack --mode=production --progress --hide-modules",
    "build:umd:min": "cross-env NODE_ENV=umd:min webpack --mode=production --progress --hide-modules",
    "build:es": "cross-env NODE_ENV=es webpack --mode=production --progress --hide-modules",
    "build:commonjs": "cross-env NODE_ENV=commonjs webpack --mode=production --progress --hide-modules"
  }
  ...
}

運行npm run build就會 CommonJS/UMD/ES Modules 三種模式生成對應的文件。

大概是這樣子：

├─dist
│    vscode-mocha-webpack-example.common.js
│    vscode-mocha-webpack-example.es.js
│    vscode-mocha-webpack-example.min.js
│    vscode-mocha-webpack-example.js

指定終端

爲了使你的構建文件成爲最終發佈包的一部分，你必須聲明它們。將如下內容添加到package.json：

"main": "dist/vscode-mocha-webpack-example.common.js",
"module": "dist/vscode-mocha-webpack-example.es.js",
"jsnext:main": "dist/vscode-mocha-webpack-example.es.js",
"files": [
  "dist",
  "src"
],

files部分告訴npm在發佈時打包這些文件夾（不然，它們將被忽略，由於它們列在.gitignore文件中）
main定義CommonJS構建的終端
jsnext:main和module定義了ES2015構建的終端（咱們定義了兩個終端，由於jsnext:main是最先使用的規範，而module則更符合標準規範）。

第二步，設置babel

經過 babel 使得咱們使用最新的語法，而沒必要擔憂運行環境不支持的問題。在webpack的下咱們須要用到babel-loader來導入babel支持，關於最新的兼容設置還需使用上babel-preset-env：

npm install -D babel babel-cli babel-preset-env
//or
//yarn add babel babel-cli babel-preset-env -D

建立 babel 配置文件

接着在.babelrc文件裏設置babel兼容的規則：

{
    "presets": [
        [
            "env",
            {
                "useBuiltIns": false,
                "modules": false
            }
        ]
    ]
}

爲 webpack 添加 babel-loader

當咱們使用最新語法編寫 JavaScript 時，webpack 會匹配將全部 JS 文件給 babel 的處理。

const package = require('./package.json')
const path = require('path')

const config = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: `${package.name}.js`
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src")
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

...

module.exports = config

當運行構建時webpack便會加載babel及其相關的設置將代碼轉換並生成，到這步構建相關的設置基本完成。

第三步，添加自動化測試

相信對自動化測試有所瞭解的讀者應該對mocha並不陌生，不瞭解的能夠先去補補相關知識再往下看。簡單的測試較多使用mocha來進行處理，還有斷言庫chai和提供promise支持的chai-as-promised等等，下面先把這些依賴安裝上：

npm install -D mocha mocha-webpack chai chai-as-promised
//or
//yarn add mocha mocha-webpack chai chai-as-promised -D

測試代碼想使用es新特性時可使用 mocha-webpack這個插件。

而後在package.json添加上測試命令：

{
    //...
    "scripts": {
        "build": "npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd:min",
        "build:umd": "cross-env NODE_ENV=umd webpack --mode=production --progress --hide-modules",
        "build:umd:min": "cross-env NODE_ENV=umd:min webpack --mode=production --progress --hide-modules",
        "build:es": "cross-env NODE_ENV=es webpack --mode=production --progress --hide-modules",
        "test": "cross-env NODE_ENV=test mocha-webpack tests/**/*.spec.js"
    }
    //...
}

.babelrc 也須要設置一下：

{
    //...
    "env": {
        "test": {
            "presets": [
                [
                    "env",
                    {
                        "modules": false,
                        "targets": {
                            "node": "current"
                        }
                    }
                ]
            ]
        }
    }
}

爲了能測試添加tests/unit/example.spec.js和src/index.js兩個文件，代碼以下：

├─src
│      index.js
└─tests
    └─unit
            example.spec.js

//# src/index.js
export function getRole(user){
    switch(user){
        case "Packy":
            return "admin"
        case "Joan":
            return "reader"
    }
}

//# tests/unit/example.spec.js
import { assert } from "chai";
import { getRole } from "@/index";

describe('Testing', ()=>{
  it('Packy is admin', () => { assert.equal(getRole('Packy'), 'admin') })
  it("Joan is reader", () => { assert.equal(getRole("Joan"), "reader") });
})

如今運行測試命令就能得出測試結果了：

npm run test

大概輸出是這個樣子：

WEBPACK  Compiling...

  [=======================  ] 91% (additional chunk assets processing)
 WEBPACK  Compiled successfully in 5893ms

 MOCHA  Testing...



  Testing
    √ Packy is admin
    √ Joan is reader


  2 passing (39ms)

 MOCHA  Tests completed successfully

關於測試覆蓋率的問題

有了測試還得知道測試是否都覆蓋了全部代碼（據說基本要到80%，有些團隊可能要求更高90~95%），那如何得知？

nyc這個包就能幫助到我去檢驗測試覆蓋率，首先先安裝依賴：

npm install -D nyc babel-plugin-istanbul

再設置檢查範圍和添加命令：

//# package.json
{
    ...
    "scripts": {
        "build": "npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:umd:min",
        "build:umd": "cross-env NODE_ENV=umd webpack --mode=production --progress --hide-modules",
        "build:umd:min": "cross-env NODE_ENV=umd:min webpack --mode=production --progress --hide-modules",
        "build:es": "cross-env NODE_ENV=es webpack --mode=production --progress --hide-modules",
        "build:commonjs": "cross-env NODE_ENV=commonjs webpack --mode=production --progress --hide-modules",
        "test": "cross-env NODE_ENV=test nyc mocha-webpack tests/**/*.spec.js"
    },
    ...
    "nyc": {
        "include": [
            "src/**"
        ],
        "instrument": false,
        "sourceMap": false
    }
    ...
}

安裝依賴中也看到babel也須要添加相關的設置：

//# .babelrc
{
    ...
    "env": {
        "test": {
            "presets": [
                [
                    "env",
                    {
                        "modules": false,
                        "targets": {
                            "node": "current"
                        }
                    }
                ]
            ],
            "plugins": [
                "istanbul"
            ]
        }
    }
}

運行npm run test將會獲得如下內容：

WEBPACK  Compiling...

  [=======================  ] 91% (additional chunk assets processing)
 WEBPACK  Compiled successfully in 5893ms

 MOCHA  Testing...



  Testing
    √ Packy is admin
    √ Joan is reader


  2 passing (39ms)

 MOCHA  Tests completed successfully

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.js |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|

簡單說一下這四欄東西表明什麼意思：

Stmts : Statement coverage 聲明覆蓋率，程序中的每一個語句都已執行嗎？
Branch: Branch coverage 分支覆蓋率，是否已執行每一個控制結構的每一個分支（也稱爲DD路徑）（例如if和case語句）？例如，給定if語句，是否已執行true和false分支？
Funcs: Function coverage 方法覆蓋率，是否已調用程序中的每一個函數（或子例程）？
Lines: Line coverage 行代碼覆蓋，是否已執行源文件中的每一個可執行的行？

不在覆蓋範圍內的代碼的行數會在Uncovered Line這欄顯示。

爲測試提供async/await支持

在測試中想使用async/await語法，需新增setup.js文件並在入口處添加babel-polyfill：

require("babel-polyfill");

並在.babelrc修改useBuiltIns爲entry：

{
    ...
    "env": {
        "test": {
            "presets": [
                [
                    "env",
                    {
                        "useBuiltIns": "entry",
                        "modules": false,
                        "targets": {
                            "node": "current"
                        }
                    }
                ]
            ],
            "plugins": [
                "istanbul"
            ]
        }
    }
}

接下來在src/index.js和tests/example.spec.js兩個文件添加新的代碼：

//# src/index.js
export function getUsers(){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            console.log('123')
            resolve(['Packy', 'Joan'])
        }, 1000)
    })
}

//# tests/unit/example.spec.js
describe('GetUsers', ()=>{
  it('get result is Array', async ()=>{
    const users = await getUsers();
    assert.isArray(users, "[message]");
  })
})

運行測試就能看到效果！

讓測試更進一步，在 VS Code 中調試

想在VS Code斷點調試代碼須要額外增長一些設置，添加如下代碼至 webpack.config.js。

//# webpack.config.js

//...

if (process.env.NODE_ENV === "test") {
    config.devtool = "eval-source-map";
    config.output = Object.assign(config.output, {
        devtoolModuleFilenameTemplate: "[absolute-resource-path]",
        devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
    });
}

module.exports = config;

在VS Code 添加調試代碼

打開 VS Code 調試面板在下拉選項中選擇添加配置（或者直接建立並打開.vscode/launch.json文件）：

// 使用 IntelliSense 瞭解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
{
    "version": "0.2.0",
    "configurations": [
    {
        "type": "node",
        "request": "launch",
        "name": "Mocha-webpack Tests",
        "program": "${workspaceFolder}/node_modules/mocha-webpack/bin/mocha-webpack",
        "args": [
            "--full-trace",
            "--timeout",
            "999999",
            "--colors",
            "tests/**/*.js"
        ],
        "sourceMaps": true,
        "env": {
            "NODE_ENV": "test"
        },
        "internalConsoleOptions": "openOnSessionStart"
    }]
}

在src目錄下的源代碼或是tests目錄下的測試代碼都能得到斷點效果，想立刻嘗試能夠下載本文例子vscode-mocha-webpack-example，安裝依賴後就能嘗試斷點調試了。

設置參考源自 vscode-ts-webpack-node-debug-example

值得一提的是，上面參考例子原文說devtool使用eval相關的設置並不能斷點，可是在使用mocha-webpack調試時上面例子並不能實現斷點。在我和公司小夥伴多番尋找vscode和mocha-webpack的issue後，通過各類嘗試下發現設置成eval-source-map便能實現最佳斷點效果（eval也能實現可是因爲斷點sourcemap指向的源是生成後的文件致使在斷點時多少會產生偏移）。