?

需求背景

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緩沖、錄像、檢索、回放、錄像下載、網頁管理等多種功能，是目前市面上最合理的一款商用流媒體服務器！

?

轉載于:https://www.cnblogs.com/kumukim/p/11006605.html

總結

以上是生活随笔為你收集整理的LiveQing视频流媒体开放平台利用 webpack 打包压缩后端代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。