组件库实战-构建umd产物,通过unpkg访问
学习目标
- 理解并掌握 组件库实战-构建umd产物,通过unpkg访问 的核心原理与工程实践
总结
前面分析过,组件库基本都会提供 esm、commonjs、umd 三种格式的代码。
这节我们实现了 umd 的支持,通过 webpack 做了打包。
打包逻辑很简单:用 ts-loader 来编译 typescript 代码,然后 react、react-dom 等模块用 externals 的方式引入就好了。
再就是 react 通过 externals 的方式,会导致 react/jsx-runtime 引入有问题,所以我们修改了 tsconfig.json 的 jsx 的编译为 react,也就是编译成 React.createElement 的代码。
虽然 umd 的方式用的场景不多,但我们组件库还是要支持的。