EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒體服務器開放平臺利用 webpack 打包壓縮後端代碼

需求背景

javaScript的用途是解決頁面交互和數據交互，最終目的是豐富客戶端效果以及數據的有效傳遞。 而且具備良好的用戶體驗。 javaScript能夠快速實現頁面交互，即js操做html的dom節構或操做樣式。 客戶端表單驗證即在數據送達服務端以前進行用戶提交信息即時有效地驗證，減輕服務器壓力,即數據交互。做爲腳本語言, javaScript沒有編譯過程, 直接以源碼就能夠運行。有的時候, 出於安全及其餘緣由, 咱們不但願別人直接讀到源碼, 或者很容易對源碼作出修改使用. 這個時候, 就須要對源碼進行混淆壓縮處理。通過處理後的代碼體積變小, 再也不可讀。

本篇博文將介紹利用 webpack 打包工具來完成對後端代碼的混淆壓縮。

安裝配置 webpack

1.安裝

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

2.配置

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

3.配置說明

• 上面的 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

EasyDSS應用場景

現場直播
攝像機或其它設備實時採集到的現場畫面，經過編碼器或編碼軟件推送到直播服務器分發，用戶便可經過PC、手機、平板電腦等多種終端實時觀看現場直播內容。經常使用於年會、發佈會、政企會議等的網絡直播。

網絡電視
實現傳統電視臺的網絡播出，支持多平臺多終端的直播觀看及時移回看。

遠程監控
配合網絡攝像頭可實現遠程視頻監控，終端用戶能夠經過PC、手機、平板電腦等多種終端實時觀看遠程畫面，並能夠把監控畫面錄製下來隨時回看或分享。普遍應用於寶寶在線、家居安全、公共安防等方向。

實時課堂
應用於遠程課堂直播，讓不在現場的人也能實時學習優質課程。支持時移，能夠隨時回看任意時間的課程。

科研方向
應用於農業、養殖業、科學實驗等跨區域場景研究。

企業展現
對企業的展現、宣傳、活動、行政、培訓等視頻資源進行 高質量轉碼，發佈到互聯網，讓員工和客戶能夠經過企業 網站、移動門戶等觀看。

關於EasyDSS

EasyDSS(http://www.easydss.com)流媒體解決方案採用業界優秀的流媒體框架模式設計，服務運行輕量、高效、穩定、可靠、易維護，支持RTMP直播、RTMP推送、HTTP點播、HTTP-FLV直播、HLS直播，並支持關鍵幀緩衝，畫面秒開等多種特性，可以接入Web、Android、iOS、H五、微信等全平臺客戶端，是移動互聯網時代貼近企業點播/直播需求的一款接地氣的流媒體服務器，配套OBS、EasyRTMP等直播推流工具以及EasyPlayer等網絡播放器，能夠造成一套完整的視頻直播、錄播解決方案，知足用戶在各類行業場景的流媒體業務需求。