视频聊天源码，如何将公共的逻辑封装成npm包？ - 云豹科技

视频聊天源码，如何将公共的逻辑封装成npm包？

在视频聊天源码开发中可能需要将公共的逻辑封装成npm包，以此来实现代码的可复用性，也能减少对应的维护成本。本篇内容主要是讲如何将使用ES6+语法的代码生成NPM包，若有不足及不恰当之处，欢迎大家指出。

环境：Babel 6 、Node 8

提示:

使用ES6+语法的NPM包想要在其他地方直接使用，而不需要进行额外处理的话，需要将其发布为ES5版本。Babel的作用便是将ES6+的语法转化为ES5的语法。本文中将源文件置于src目录下，编译后的目标文件置于build目录下。

1. 初始化package.json文件

运行 npm init 生成 package.json 文件。这里通过main字段指定NPM包的入口文件。

{"name": "wx-jump-sdk","version": "1.0.0","description": "","main": "build/index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["微信小程序跳转SDK"],"author": "","license": "ISC","dependencies": {}
}

2. 进行Babel配置

1、安装babel-cli
babel-cli支持在命令行下使用Babel进行文件编译。
2、安装babel-polyfill (可选)
Babel仅支持编译新的JS语法，使用babel-polyfill进行箭头函数等API的编译。
3、安装babel-preset-es2015 （视情况决定）
支持将ES2015（ES6）编译成ES5。可根据自身使用的ES版本选取不同的预设，譬如：babel-preset-es2016支持将ES7编译为ES5。
4、babel-preset-stage-0 （视情况决定）
ES每次发版都会经历stage0 ~ stage4 的5个阶段（分别是0: 任意提交内容，1: 提案，2: 草案，3: 候选，4: 就绪），babel-preset-stage-0表示支持stage 0的任意特性。
5、设置babel配置文件.babelrc

{"presets": ["es2015", "stage-0"],"plugins": []
}

4. 设置发布时编译

npm脚本具有post、pre两个钩子。因在进行发布时要运行 npm publish 的发布命令，而发布到线上的NPM包需要提供ES5版本的代码，因此可以在 prepublish钩子函数 时执行代码编译的任务。需要在package.json的script字段中添加如下的配置：

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","compile": "babel src -d build","prepublish": "npm run compile"},

npm钩子函数可参考：https://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

5. 忽略源文件

为了让NPM包尽可能地小，可以通过新增.npmiginore文件设置忽略本地的ES6+代码的源文件。文件.npmiginore中仅需添加 /src 内容即可。

6. 发布NPM包

运行 npm publish 进行NPM包的发布。

以上就是视频聊天源码，如何将公共的逻辑封装成npm包？， 更多内容欢迎关注之后的文章