{T}

组件库实战-构建esm和cjs产物,发布到npm

学习目标

  • 理解并掌握 组件库实战-构建esm和cjs产物,发布到npm 的核心原理与工程实践

总结

今天我们把之前写过的部分组件封装成了组件库并发布到了 npm 仓库。

可以直接在项目里引入来用,和 antd 等组件库一样。

构建部分我们分析过很多组件库,都是一样的:

  • commonjs 和 esm 的代码通过 tsc 或者 babel 编译产生
  • umd 代码通过 webpack 打包产生
  • css 代码通过 sass 或者 less 等编译产生
  • dts 类型也是通过 tsc 编译产生

我们在 package.json 里配置了 main 和 module,分别声明 commonjs 和 es module 的入口,配置了 types 指定类型的入口。

然后通过 npm adduser 登录,之后 npm publish 发布到 npm。

这样,react 项目里就可以引入这个组件库来用了,之前写过的所有组件都可以加到这个组件库里。

继续阅读