webpack選擇性編譯DefinePlugin（打包自動剔除測試數(shù)據(jù)）

王軍發(fā)布于2019-08-21 17:00 / 1712人閱讀

摘要：選擇性編譯是指根據(jù)打包是環(huán)境的不同，選擇性地讓特定的語句有效，讓特定的語句無效。選擇性編譯是筆者自己瞎想出來的名詞，不知道用的對不對。檢測時，還沒有被替換掉。

背景

程序在開發(fā)的過程中，少不了打印調(diào)試用的日志，測試流程時偽造的數(shù)據(jù)。這些代碼是不能出現(xiàn)在生產(chǎn)環(huán)境上的。
這意味著在程序打包前，需要把相關(guān)代碼剔除掉。
這些事情用人手去做很麻煩，很容易疏漏。而且打包出來測試時遇到了bug，又得重新把測試代碼添加回去。重復整個繁瑣的過程。

既然人工做這么麻煩而且容易出錯，那能不能用程序幫我們完成這些事情呢？
當然可以，用選擇性編譯技術(shù)就行，本文就介紹在webpack下解決這一問題的方法。
其實這個方法在webpack官網(wǎng)就有提到，本文只是提供相關(guān)示例及做一些延伸。

選擇性編譯是指根據(jù)打包是環(huán)境的不同，選擇性地讓特定的語句有效，讓特定的語句無效。
最簡單的例子，在開發(fā)環(huán)境中，我們打印日志，但在生產(chǎn)環(huán)境中，我們讓所有打印日志的語句無效（讓程序不運行打印的語句，甚至讓打包出來的文件根本就不包含打印日志的語句）。
選擇性編譯是筆者自己瞎想出來的名詞，不知道用的對不對。

實踐過程 首先，先讓我們看一個選擇性打印日志的示例。

新建一個vue項目

打開build/webpack.dev.conf.js文件（項目處于開發(fā)環(huán)境時使用到的webpack打包配置，運行npm run dev，這個文件就會被執(zhí)行）

添加如下代碼

new webpack.DefinePlugin({
    "process.env": config.dev.env,
    IS_DEV: JSON.stringify(true),
}),

打開build/webpack.prod.conf.js文件（項目打包生產(chǎn)環(huán)境時使用到的webpack打包配置，運行npm run build，這個文件就會被執(zhí)行）

添加如下代碼

new webpack.DefinePlugin({
    "process.env": config.dev.env,
    IS_DEV: JSON.stringify(false),
}),

打開src/main.js文件（項目入口文件，運行項目時被執(zhí)行）

添加如下代碼

if (IS_DEV) {
    console.log("this is dev env");
} else {
    console.log("this is prod env");
}

分別在開發(fā)環(huán)境和生產(chǎn)環(huán)境運行程序，查看控制臺。我們發(fā)現(xiàn)，在開發(fā)環(huán)境下，打印了this is dev env。在生產(chǎn)環(huán)境下運行打印了this is prod env。

打開打包出來的文件/dist/static/js/app.xxx.js.map，搜索this is prod env。我們發(fā)現(xiàn)IS_DEV變成了false。

同理，我們在開發(fā)環(huán)境下，查看chrome開發(fā)者工具，找到相應(yīng)的app.xxx.js文件。我們發(fā)現(xiàn)IS_DEV變成了true。

由此我們可以知道

選擇性編譯本質(zhì)上是字符串的替換，先經(jīng)過DefinePlugin對代碼中的特定字符串進行替換。再對替換后的代碼進行編譯打包。

需要替換的變量需要分別在webpack.dev.conf.js和webpack.prod.conf.js中指定其轉(zhuǎn)換后的意義。

為什么在mian.js中使用IS_DEV，程序不會報"IS_DEV is not defined"的錯誤？

因為瀏覽器在運行代碼時，拿到的文件里面IS_DEV已經(jīng)被替換成了true或者false，已經(jīng)不存在IS_DEV這個變量。所以不會報錯。

DefinePlugin的使用說明

除了替換成簡單的布爾值，還可以替換成字符串，數(shù)值，數(shù)組，對象等。

如TEST_DATA: JSON.stringify({name:"momo",age:18}),

為什么需要進行JSON.stringify替換？

另外還可以替換成某個段代碼的值（代碼內(nèi)容直接使用""包裹即可）。

如：TWO: "1+1",TOW將被替換成這段代碼的結(jié)果，即2。

ESLint沖突處理

ESLint是一個用來識別 ECMAScript 并且按照規(guī)則給出報告的代碼檢測工具，使用它可以避免低級錯誤和統(tǒng)一代碼的風格。
配置了eslint的項目在使用選擇性編譯功能時，可能會報出這樣的錯誤。
http://exlint.org/docs/rules/no-undef     "IS_DEV" is not defined
正如報錯信息所說的，這是由于eslint檢測代碼時，發(fā)現(xiàn)IS_DEV沒有定義（這側(cè)面說明了eslint是先于條件編譯執(zhí)行的。ESLint檢測時，IS_DEV還沒有被替換掉）。解決這個問題有以下三種方法：

簡單粗暴的方法，修改eslint的配置，將error改為warn唄，先打包了再說。具體操作為修改eslintrc.js文件，如果配置文件里面已有第一條語句"eslint":"recommended"（這是引用默認配置）。則往rules里面添加一條規(guī)則"no_undef":"warn"，以覆蓋掉默認配置。

如果已經(jīng)存在"no-undef"的配置，則直接改為"warn"就行。

上面的方法影響太大，直接修改了規(guī)則。能不能局部修改規(guī)則，只在特定語句中忽略掉該規(guī)則呢？可以的，使用備注包裹需要忽略的語句就行。

但是上面的方法需要在每個用到的地方都多寫兩條語句，略麻。，有沒有更簡單的，一勞永逸的方法呢？有有有~~ 修改eslintrc.js，將IS_DEV配置成一個全局變量，之后eslint就不會認為IS_DEV是未定義的變量了。

選擇性編輯技術(shù)的應(yīng)用場景

API接口的環(huán)境替換

賬號信息的模擬，數(shù)據(jù)模擬

日志打印等

彩蛋 更優(yōu)的去除log的方法

用if邏輯判斷來輸出log可能略顯繁瑣。其實對于控制臺輸出的日志，我們可以通過UglifyJs在打包時來剔除。
具體操作：

打開build/webpack.prod.conf.js文件，添加如下語句

compress: {
    warnings: false, // 去除warning警告
    drop_debugger: true, // 發(fā)布時去除debugger語句
    drop_console: true // 發(fā)布時去除console語句
},

如果想只去除console.log，同時保留console.error等錯誤提示。可以指定去除特定的函數(shù)

compress: {
    warnings: false, // 去除warning警告
    pure_funcs: ["console.log"], // 配置發(fā)布時，不被打包的函數(shù)
    // drop_debugger: true, // 發(fā)布時去除debugger
    // drop_console: true // 發(fā)布時去除console
}

注意，添加了這個配置以后，console.log在打包出來的文件就不存在了。所以前面測試用的this is dev env也會消失不見

去除條件編譯中不可達代碼

什么叫不可達代碼？就是無論什么情況下都不會被運行的代碼。

例如我們在條件編譯打包出來的代碼中

if (false) {
    console.log("this is dev env");
} else {
    console.log("this is prod env");
}

```console.log("this is dev env");```就是不可達代碼。
我們同樣可以使用UglifyJs的功能把這部分無用代碼去除掉。讓條件編譯不留痕跡。
具體配置如下：
```
compress: {
    warnings: false, // 去除warning警告
    dead_code: true, // 去除不可達代碼
}, sourceMap: true
```
![dead_code](http://upyun.luckly-mjw.cn/Assets/selective-compilation/dead_code.png)

UglifyJs的更多功能

UglifyJs還用很多強大的功能，如代碼混淆，壓縮，重拍版等。這里附上UglifyJs官方網(wǎng)址。
英文不好的同學還可以查看對應(yīng)的中文文檔（其實這才是重點#機智臉）。

完結(jié)，撒花花