需求背景

JavaScript 是指令碼語言, 沒有編譯過程, 直接以原始碼就可以執行. 有的時候, 出於安全或者其他的原因, 我們不希望別人直接讀到原始碼, 或者很容易對原始碼做出修改使用. 這個時候, 就需要對原始碼進行混淆壓縮處理. 經過處理後的程式碼體積變小, 不再可讀. 本篇介紹利用 webpack 打包工具來完成對後端程式碼的混淆壓縮.

安裝配置 webpack

• 安裝

npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-stage-2 webpack -D

• 配置

const webpack = require('webpack');
const path = require('path');

function resolve(dir) {
    return path.resolve(__dirname, dir);
}

module.exports = {
    entry: {
        app: ['babel-polyfill', './app.js'],
    },
    target: 'node',
    output: {
        path: __dirname,
        filename: '[name].min.js'
 

    },
    resolve: {
        modules: [".", "node_modules"],
        extensions: ['.js'],
        alias: {
            "cfg": resolve("cfg.js")
        }
    },
    externals: function () {
        let manifest = require('./package.json');
        let dependencies = manifest.dependencies;
        let
 
 externals = {};
        for (let p in dependencies) {
            externals[p] = 'commonjs ' + p;
        }
        externals["cfg"] = "commonjs cfg";
        return externals;
    }(),
    node: {
        console: true,
        global: true,
        process: true,
        Buffer: true,
        __filename: true,
        __dirname: true,
        setImmediate: true
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
};

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins = (module.exports.plugins || []).concat([new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        compress: false
    })]);
}

• 配置說明

上面的 webpack 配置將會把 app.js 和它的依賴原始碼混淆壓縮到一個檔案app.min.js當中.

通過 externals 屬性告訴 webpack 在打包的時候不要打包 node_modules 目錄下面的程式碼, 也不要將程式的配置檔案 cfg.js 一起打包, 因為 node_modules 目錄可以根據 package.json 安裝生成, 而 cfg.js 是留給使用者自定義配置用的, 如果一起打包到 app.min.js 就不方便編輯了, 所以這兩項都排除了.

但是這裡排除打包 cfg.js 有個問題需要解決. 我們只指定了對 cfg 字樣的模組進行排除, 也就是說, 在原始碼裡面, 凡是要引用 cfg.js 的地方, 我們都不能按照相對路徑來寫, 比如 require(‘./cfg.js’), 如果這樣寫, 那麼 cfg.js 還是會打包到最終的檔案裡在. 正確的寫法是 require(‘cfg’). 這就要求把 NODE_PATH 指向當前原始碼的根目錄.

為了方便指定 NODE_PATH, 我們可以安裝 cross-env 元件

npm i cross-env -D

接下來, 如果你之前以 node app.js 這種方式執行程式, 那麼現在改為這樣 cross-env NODE_PATH=. node app.js

還有一個小問題, 我這裡使用 vscode, 來做 JS 開發 IDE, 當以相對路徑引用庫檔案的時候, vscode 能夠提供很好的編碼提示. 但是以指定 NODE_PATH 的方式引用檔案時, vscode 不能提示. 為了讓 vscode 知道 NODE_PATH 所在, 我們可以在原始碼根目錄下新建一個配置檔案來解決, jsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "baseUrl": "."
    }
}

打包

cross-env NODE_ENV=production NODE_PATH=. webpack --progress --hide-modules