LiveQing視頻流媒體開放平臺利用 webpack 打包壓縮後端代碼

需求背景

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_PATH=. webpack --progress --hide-modules

關於LiveQing

LiveQing商用流媒體服務器解決方案是一套集流媒體點播、轉碼與管理、直播、錄像、檢索、時移回看於一體的一套完整的商用流媒體服務器解決方案，LiveQing高性能RTMP流媒體服務器支持RTMP推流，同步輸出HTTP、RTMP、HLS、HTTP-FLV，支持推流分發/拉流分發，支持秒開、GOP緩衝、錄像、檢索、回放、錄像下載、網頁管理等多種功能，是目前市面上最合理的一款商用流媒體服務器！

獲取更多信息

郵件：[email protected]

技術交流QQ羣：947137753

諮詢電話：[phone]（同微信）

在線演示：http://demo.liveqing.com:10080

試用下載：https://gitee.com/liveqing/ReleaseVersion/releases/LiveQing/

LiveQing視頻流媒體無插件直播方案：www.liveqing.com

Copyright © LiveQing Team 2016-2019