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等网络播放器，能够造成一套完整的视频直播、录播解决方案，知足用户在各类行业场景的流媒体业务需求。