前端怎么发npm包

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

使用es module

我们想尽量减小包的体积，tree shaking 是一个非常常用的技术，es module能让tree shaking跨模块进行。如果你采用了commonjs模块，就阻止了跨npm包的tree shaking了。

要构建一个es包，需要保证：

1. 构建出来的文件是es module模块
2. 将入口文件通过package.json 里的module字段指定为 es module模块的入口
3. 如果要运行在nodejs环境里，需要提供一个commonjs包，如果要运行在cdn上，需要提供amd或者umd的包

我们需要注意的是使用es module，还可以提供作用域提升的优化，可以让打包出来的所有文件都放到同一个函数里，webpack打包的更小。

使用files文件配置

可以限定一下文件发布的范围

增量引用搞起来

我们希望增量引用，通常原理也比较简单，就是import {form} from antd，这种的，可以引入antd/form这种形式。有俩库可以参考，分别是antd的增量引用库以及elementui的增量引用库，两个库的原理差不多。我们可以看看babel-plugin-component这个库，它可以把每个仓库都作出特定的转换。比如import { button } from 'com', 它可以i转换成 import Button from 'com/lib/button'以及import 'com/lib/button.css'。但是它的模式相对来说比较固定，需要看是否能满足你的要求。 我们再来看看antd的御用仓库babel-plugin-import。其实也是半斤八两，大差不差，但是它的定制性比较强一些，我们可以利用它里面的一些配置做很多的事情。

比如里面的customname这个字段，我们可以通过它来将本来引入sdk的库转换成引入其它的形式，而且写法非常地方便：

import { antd } from 'sdk'; 就可以通过配置:

[
  "import",
    {
      "libraryName": "sdk",
      "customName": (name: string, file: object) => {
        if (name === 'antd'){
          return 'antd/lib/index.js';
        }
        if (name === 'element') {
          return 'element/lib/index';
        }
        return `sdk/lib/${name}`;
      }
    }
]

这样我们就能同时引用俩了，也可以用同样的道理引入css。