封装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配置

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