发布一个npm包的踩坑

试着自己发布了一个npm包，记录一下自己踩的坑

package.json

首先npm init，然后添加type:module字段，将其定义为一个es6模块。然后在files字段设置要发布上去的内容，比如dist文件夹。

接下来将开发用到的依赖添加到devDependencies里面去，比如react，和打包工具等等。这样当我们的包被引入时，就只会引进来我们的包，而不会把我们的依赖也一起安装下来。

rollup设置

我们使用rollup来打包。常用的打包工具中rollup比较简洁，适合库的打包。我们在项目根目录添加rollup.config.js来配置打包参数。output中我们根据format的不同，分别打包到dist下的cjs和esm目录，

output: [
    { 
      file: "dist/cjs/index.js", 
      format: "cjs" },
    {
      file: "dist/esm/index.js",
      format: "esm",
    },
  ],

然后为了支持ts，我们添加插件rollup-plugin-typescript2。

之后我们将rollup打包命令添加到package.json的build命令下。

然后因为我们的组件里依赖了react，为了避免将react也打进来，我们需要再添加externals字段，将react添加到其中。

之后我们执行npm publish就可以了。