用webpack寫個(gè)現(xiàn)代的JavaScript包

yhaolpz 發(fā)布于2019-08-23 13:42 / 886人閱讀

摘要：這里我們可以嘗試運(yùn)行一下命令嘗試能否構(gòu)建成功，成功的情況下在目錄下會(huì)生成的文件。在添加調(diào)試代碼打開(kāi)調(diào)試面板在下拉選項(xiàng)中選擇添加配置或者直接創(chuàng)建并打開(kāi)文件使用了解相關(guān)屬性。

webpack 作為目前主流的構(gòu)建工具，其較快的版本迭代和復(fù)雜的配置方式，使得每次開(kāi)發(fā)前不得不規(guī)劃相當(dāng)部分時(shí)間來(lái)調(diào)試。這里將記錄整個(gè)環(huán)境的搭建過(guò)程，為新手提供基礎(chǔ)思路。

就像我在開(kāi)發(fā)vue-sitemap時(shí)一樣，構(gòu)建工具往往需要達(dá)到下面幾個(gè)需求：

構(gòu)建生成 CommonJS/UMD/ES Modules 三種模式的代碼提供給使用者

需運(yùn)行測(cè)試和檢查測(cè)試覆蓋的進(jìn)度

開(kāi)發(fā)時(shí)候使用 VS Code 編輯器進(jìn)行斷點(diǎn)調(diào)試

以上三個(gè)作為開(kāi)發(fā)一個(gè)組件(package)是基礎(chǔ)中基礎(chǔ)的需求，當(dāng)然還有更多細(xì)節(jié)內(nèi)容需要添加，由于篇幅過(guò)長(zhǎng)另加文章再說(shuō)吧。（歡迎各位讀者評(píng)論留下你認(rèn)為需要的功能( ? ?ω?? )?）

第一步：構(gòu)建工具

接下來(lái)我們先從最基礎(chǔ)的開(kāi)始，需要安裝 Node.js(10.x) 作為所有代碼的運(yùn)行環(huán)境， webpack 也是一樣。

初始化項(xiàng)目

由于我需要把項(xiàng)目發(fā)布至 npm 的，使用命令初始化項(xiàng)目描述文件 package.json

npm init

初次化細(xì)節(jié)各位讀者找其他文章補(bǔ)全吧，這里不細(xì)說(shuō)

接下來(lái)看看目錄結(jié)構(gòu)

│  package.json     //項(xiàng)目描述文件
│  README.md        //GitHub創(chuàng)建倉(cāng)庫(kù)時(shí)默認(rèn)創(chuàng)建
├─src               //源代碼目錄
│      index.js     //入口文件
├─tests             //測(cè)試代碼目錄
│
├─dist              //生產(chǎn)文件的目錄
│
└─docs              //文檔目錄

添加 webpack

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

這里使用的 webpack v4，后續(xù)設(shè)置也是基于4來(lái)設(shè)置，cross-env是幫助在 win 下能正常使用環(huán)境變量的包，我開(kāi)發(fā)在 win 環(huán)境于是在這加上。yarn 是一款快速、可靠、安全的依賴管理工具。如果你覺(jué)得 npm 安裝時(shí)候較慢的話，不妨試試。

等依賴下載解決完畢之后，，在package.json設(shè)置構(gòu)建命令方便之后使用。

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

這里我們可以嘗試運(yùn)行一下命令npm run build嘗試能否構(gòu)建成功，成功的情況下在dist目錄下會(huì)生成main.js的文件。

配置 webpack

創(chuàng)建 webpack.config.js文件來(lái)配置 webpack 。為滿足我們的第一個(gè)需要生成三種模式的代碼：

//# webpack.config.js

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

const config = {
    entry: "./src/index.js",  //入口文件
    output: {                 //輸出設(shè)置
        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

添加構(gòu)建命令

為 package.json 添加新的運(yùn)行命令

//# package.json
{
  "version": "0.1.0",
  "name": "vscode-mocha-webpack-example",
  "description": "用于管理導(dǎo)航、面包屑及路由等基于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"
  }
  ...
}

運(yùn)行npm run build就會(huì) CommonJS/UMD/ES Modules 三種模式生成對(duì)應(yīng)的文件。

大概是這樣子：

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

指定終端

為了使你的構(gòu)建文件成為最終發(fā)布包的一部分，你必須聲明它們。將以下內(nèi)容添加到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在發(fā)布時(shí)打包這些文件夾（否則，它們將被忽略，因?yàn)樗鼈兞性?b>.gitignore文件中）

main定義CommonJS構(gòu)建的終端

jsnext:main和module定義了ES2015構(gòu)建的終端（我們定義了兩個(gè)終端，因?yàn)?b>jsnext:main是最早使用的規(guī)范，而module則更符合標(biāo)準(zhǔn)規(guī)范）。

第二步，設(shè)置babel

通過(guò) babel 使得我們使用最新的語(yǔ)法，而不必?fù)?dān)心運(yùn)行環(huán)境不支持的問(wèn)題。在webpack的下我們需要用到babel-loader來(lái)導(dǎo)入babel支持，關(guān)于最新的兼容設(shè)置還需使用上babel-preset-env：

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

創(chuàng)建 babel 配置文件

接著在.babelrc文件里設(shè)置babel兼容的規(guī)則：

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

為 webpack 添加 babel-loader

當(dāng)我們使用最新語(yǔ)法編寫 JavaScript 時(shí)，webpack 會(huì)匹配將所有 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

當(dāng)運(yùn)行構(gòu)建時(shí)webpack便會(huì)加載babel及其相關(guān)的設(shè)置將代碼轉(zhuǎn)換并生成，到這步構(gòu)建相關(guān)的設(shè)置基本完成。

第三步，添加自動(dòng)化測(cè)試

相信對(duì)自動(dòng)化測(cè)試有所了解的讀者應(yīng)該對(duì)mocha并不陌生，不了解的可以先去補(bǔ)補(bǔ)相關(guān)知識(shí)再往下看。簡(jiǎn)單的測(cè)試較多使用mocha來(lái)進(jìn)行處理，還有斷言庫(kù)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

測(cè)試代碼想使用es新特性時(shí)可以使用mocha-webpack這個(gè)插件。

然后在package.json添加上測(cè)試命令：

{
    //...
    "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 也需要設(shè)置一下：

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

為了能測(cè)試添加tests/unit/example.spec.js和src/index.js兩個(gè)文件，代碼如下：

├─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") });
})

現(xiàn)在運(yùn)行測(cè)試命令就能得出測(cè)試結(jié)果了：

npm run test

大概輸出是這個(gè)樣子：

 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

關(guān)于測(cè)試覆蓋率的問(wèn)題

有了測(cè)試還得知道測(cè)試是否都覆蓋了所有代碼（聽(tīng)說(shuō)基本要到80%，有些團(tuán)隊(duì)可能要求更高90~95%），那如何得知？

nyc這個(gè)包就能幫助到我去檢驗(yàn)測(cè)試覆蓋率，首先先安裝依賴：

npm install -D nyc babel-plugin-istanbul

再設(shè)置檢查范圍和添加命令：

//# 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也需要添加相關(guān)的設(shè)置：

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

運(yùn)行npm run test將會(huì)得到以下內(nèi)容：

 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 |                   |
----------|----------|----------|----------|----------|-------------------|

簡(jiǎn)單說(shuō)一下這四欄東西代表什么意思：

Stmts : Statement coverage 聲明覆蓋率，程序中的每個(gè)語(yǔ)句都已執(zhí)行嗎？

Branch: Branch coverage 分支覆蓋率，是否已執(zhí)行每個(gè)控制結(jié)構(gòu)的每個(gè)分支（也稱為DD路徑）（例如if和case語(yǔ)句）？例如，給定if語(yǔ)句，是否已執(zhí)行true和false分支？

Funcs: Function coverage 方法覆蓋率，是否已調(diào)用程序中的每個(gè)函數(shù)（或子例程）？

Lines: Line coverage 行代碼覆蓋，是否已執(zhí)行源文件中的每個(gè)可執(zhí)行的行？

不在覆蓋范圍內(nèi)的代碼的行數(shù)會(huì)在Uncovered Line這欄顯示。

為測(cè)試提供async/await支持

在測(cè)試中想使用async/await語(yǔ)法，需新增setup.js文件并在入口處添加babel-polyfill：

require("babel-polyfill");

并在.babelrc修改useBuiltIns為entry：

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

接下來(lái)在src/index.js和tests/example.spec.js兩個(gè)文件添加新的代碼：

//# 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]");
  })
})

運(yùn)行測(cè)試就能看到效果！

讓測(cè)試更進(jìn)一步，在 VS Code 中調(diào)試

想在VS Code斷點(diǎn)調(diào)試代碼需要額外增加一些設(shè)置，添加以下代碼至 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 添加調(diào)試代碼

打開(kāi) VS Code 調(diào)試面板在下拉選項(xiàng)中選擇添加配置（或者直接創(chuàng)建并打開(kāi).vscode/launch.json文件）：

// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請(qǐng)?jiān)L問(wèn): 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目錄下的測(cè)試代碼都能獲得斷點(diǎn)效果，想馬上嘗試可以下載本文例子vscode-mocha-webpack-example，安裝依賴后就能嘗試斷點(diǎn)調(diào)試了。

設(shè)置參考源自vscode-ts-webpack-node-debug-example

值得一提的是，上面參考例子原文說(shuō)devtool使用eval相關(guān)的設(shè)置并不能斷點(diǎn)，但是在使用mocha-webpack調(diào)試時(shí)上面例子并不能實(shí)現(xiàn)斷點(diǎn)。在我和公司小伙伴多番尋找vscode和mocha-webpack的issue后，經(jīng)過(guò)各種嘗試下發(fā)現(xiàn)設(shè)置成eval-source-map便能實(shí)現(xiàn)最佳斷點(diǎn)效果（eval也能實(shí)現(xiàn)但是由于斷點(diǎn)sourcemap指向的源是生成后的文件導(dǎo)致在斷點(diǎn)時(shí)多少會(huì)產(chǎn)生偏移）。

吐槽：在使用nvm切換nodejs環(huán)境時(shí)發(fā)現(xiàn)npm下載不了，打開(kāi)github的下載鏈接直接404了，驚悚地發(fā)現(xiàn)npm整個(gè)搬走?(`Д′*)9?┴┴，為解決這個(gè)問(wèn)題請(qǐng)下載最新版本v1.1.7的nvm。

最后：

我的動(dòng)力來(lái)自你的指頭，請(qǐng)用你的指頭使勁給我個(gè)贊吧！d(′ω｀ )

覺(jué)得本文有幫助的話不要忘記點(diǎn)一下收藏φ(>ω<*) 哦！

同時(shí)歡迎各路新手、大神在本文下方吐槽留言，謝謝參與討論的各位仁兄！( ? ?ω?? )?

下面是本文完整例子，記得star一下！

vscode-mocha-webpack-example

同時(shí)非常感謝Mather協(xié)同編輯！

云服務(wù)器 GPU云服務(wù)器用java寫個(gè)日歷用 Java 寫個(gè)塔防游戲「GitHub webpack的作用 webpack的cdn

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99427.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yhaolpz

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Ftech：越南vps,2核/2G僅$12.5月起;越南服務(wù)器L5,24G內(nèi)存,250G SSD,僅

閱讀 4306·2021-09-26 10:11
NameCheap：新注冊(cè).COM域名$5.98（更新轉(zhuǎn)入域名優(yōu)惠）

閱讀 2700·2021-07-28 00:37
CSS 1-選擇器

閱讀 3244·2019-08-29 15:29
JS基礎(chǔ)入門篇（二）—if ，字符串拼接，數(shù)組，圖片循環(huán)切換

閱讀 1207·2019-08-29 15:23
復(fù)習(xí)js 2

閱讀 3154·2019-08-26 18:37
淺析深度克?。╠eepclone）

閱讀 2492·2019-08-26 10:37
javaScript抱佛腳之構(gòu)造函數(shù)、原型等等

閱讀 623·2019-08-23 17:04
淺談vi-motion小程序運(yùn)動(dòng)組件的內(nèi)部原理

閱讀 2372·2019-08-23 13:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用webpack寫個(gè)現(xiàn)代的JavaScript包

相關(guān)文章

**React全棧--現(xiàn)代前端技術(shù)**

現(xiàn)代腳本的加載

2019-我的前端面試題

React文檔翻譯系列（一）安裝

**2020年如何寫一個(gè)現(xiàn)代的JavaScript庫(kù)**

發(fā)表評(píng)論

0條評(píng)論

yhaolpz

男|高級(jí)講師

TA的文章

Ftech：越南vps,2核/2G僅$12.5月起;越南服務(wù)器L5,24G內(nèi)存,250G SSD,僅

NameCheap：新注冊(cè).COM域名$5.98（更新轉(zhuǎn)入域名優(yōu)惠）

CSS 1-選擇器

JS基礎(chǔ)入門篇（二）—if ，字符串拼接，數(shù)組，圖片循環(huán)切換

復(fù)習(xí)js 2

淺析深度克?。╠eepclone）

javaScript抱佛腳之構(gòu)造函數(shù)、原型等等

淺談vi-motion小程序運(yùn)動(dòng)組件的內(nèi)部原理

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

用webpack寫個(gè)現(xiàn)代的JavaScript包

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！