编写一个供浏览器端使用的NPM包

此文已由做者吴维伟受权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

在编写程序时，总会有一些代码是咱们不肯意一遍又一遍重复地去写的，好比一些UI或交互类似组件，或是一些类似的流程或逻辑。之前，面对这样的状况，我会将能够复用的部分抽象出来，作成能够复用的模块，放在专门存放公用模块的文件夹中，便于查找和引用。可是这样只能解决单个项目中公用模块复用的问题，若是你的模块须要被多个项目复用，那么就须要另寻它法了。本文讨论的是经过发布npm包来实现模块复用时有哪些注意事项。

新建一个包

在项目根目录下执行下面的命令，初始化package.json文件。

$ npm init

文件中各字段的含义能够参考官方文档。 其中须要注意的是：

• name指定包名，在发布包时包名不能与已有包名重复。在发布前能够经过npm info packageName查看包名是否已存在。

• main指定加载包时默认加载的文件。

• files指定发布包时须要发布的文件。通常来讲，.git, node_modules, test等文件不该该发布到npm仓库中。

• dependencies指定须要依赖的第三方包。在安装此包时，这些第三方包也同时会被安装。为了提升包的安装速度，没必要要的依赖不要放在dependencies中。

打包

为何须要打包

业务项目的打包过程当中，为了提升打包速度，某些处理过程会过滤第三方包，如babel。并且业务项目中可能没有处理第三方库中某些特性的能力，如第三方包中使用了coffeescript。因此做为一个能被良好复用的第三方包，须要在发布前，对本身的源码进行编译打包。

注意事项

能够选择webpack进行打包。在打包过程当中，与业务项目不一样的是：

将output.libraryTarget配置为commonjs

业务项目中打包后的文件只须要被执行，并不须要对外导出变量。为了可以以commonjs规范对外导出变量，须要将output.libraryTarget配置为commonjs点击查看如何配置

打包时过滤第三方包

做为一个NPM包，可能会依赖一些第三方包，如React。若是直接进行打包，打包后的文件会包含React的代码。通常依赖这个NPM包的业务项目也会依赖React，因此最终React的代码会被打包两次。因此建议在打包时对第三方包进行过滤，并把用到的第三方包声明在dependencies中，使依赖的第三方包随业务项目一块儿打包。 点击查看如何过滤第三方包

使用babel-plugin-transform-runtime

咱们一般会使用babel来编译代码。在编译的过程当中，babel会额外注入一些代码，使编译后的代码有更好的兼容性，如继承，Promise, Map, Set等功能的实现。为了防止这些额外的代码被重复加入，能够在编译时使用babel-plugin-transform-runtime插件，使这些额外的功能从第三方包(babel-runtime)中导入，而不是直接添加实现代码。同时在打包时也要对babel-runtime进行过滤，使babel-runtime随业务项目一块儿打包。 点击查看如何使用transform-runtime

按需加载

有时一个NPM包会提供不少功能，而依赖它的业务项目只须要其中一部分。这个时候，NPM包须要提供按需加载的功能，即在打包时只会将引用的部分模块打包进来，从而减小打包后文件的体积。

babel-plugin-import的使用

babel-plugin-import插件能够实现按需加载的功能。

{
    "plugins": [
        ["import", {
            "libraryName": "abc",
            "style": true
        }]
    ]}

上面的代码是babel配置文件的一部分，声明对abc模块使用按需加载的功能。它对下面的一段代码进行编译：

// 从模块中导入var1, var2, var3 3个变量，只使用了var1import {var1, var2, var3} from 'abc'console.log(var1)

编译结果：

import { style as _style } from 'abc/lib/var1/style';import _default from 'abc/lib/var1';

console.log(_default);

编译前，导入整个abc包。编译后，只导入了使用了的var1。babel-plugin-import支持更灵活的配置，点击查看详情。 点击查看如何配置babel

为了使babel-plugin-import可以按需加载咱们的NPM包，在打包时须要有一些相应的配置。如上面的abc包，须要对var1, var2, var3等模块分别打包。因此打包后的文件除了abc/index.js外，还须要有abc/lib/var1/index.js, abc/lib/var1/style.js等

测试

对于一个公用模块，最重要的应该是它的稳定性。一个每次升级均可能带来新bug的公用模块并非咱们想要的。相比于业务项目，公用模块提供的功能变化较小，这样单元测试就有了用武之地。想象之中，公用模块的迭代过程是这样的：

• 明确模块提供的功能，并针对这些功能编写测试用例。

• 进行功能开发，经过测试用例。

• 若是须要修复bug或新增功能，针对bug或新功能编写测试用例，经过用例。

  如何进行单元测试

  断言库

  断言库主要用于对数据进行比较，判断其是否与预期相符。对于不知足预期的断言，会抛出一个异常.

  assert.equal('a', 'b')
  

  如上面的断言会抛出一个异常AssertionError: 'a' == 'b'断言库推荐使用Chai，支持多种风格的断言。

  测试框架

  测试框架能够对测试用例进行分类管理。每个测试用例在一个单独的闭包中执行，若是在这个闭包中捕获到异常，则认为这个测试用例没有经过。

// 一个分类describe('type1:', function () {    // 一个用例（经过）
    it('case 1:', function () {
        assert.equal('a', 'a')
    })   // 一个用例（未经过）
    it('case 2:', function () {
        assert.equal('a', 'b')
    })
})

测试框架推荐使用mocha

测试执行器

推荐使用karma，它能够集成webpack、 mocha、 chai、 浏览器，对测试代码进行打包，并在浏览器环境下执行测试用例，最后在控制台输出结果。

文档

一个公用模块应该有一个API文档，可是手动维护一个文档的成本太高。所幸如今有一些工具能够根据代码中的注释自动生成API文档，你须要作的只是根据规范添加代码注释。 点击查看注释规范生成网页形式的文档生成markdown形式的文档

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 一行代码搞定Dubbo接口调用
【推荐】 HBase原理–全部Region切分的细节都在这里了