封装npm包实践

carrie

最近好几次在开发中都需要将公共的逻辑封装成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包的发布。

阅读 1.5k
11 声望
1 粉丝
0 条评论
你知道吗?

11 声望
1 粉丝
文章目录
宣传栏