组件库打包

layout: post read_time: true show_date: true title: ‘组件库打包’ date: 2021-07-19 img: posts/20210705/4.jpg tags: [工程化] category: opinion author: 随步 description: ‘组件库库打包’ —

webpack开发打包一条龙 通过各种loader处理静态资源 通过各种插件对文件进行处理 code spliting将公共模块进行提取 提供一个webpack-dev-server进行本地开发（支持HMR模块热替换）

rollup构建打包工具 面向ES module构建出结构扁平，性能出众的类库。 ES Module的规则->区别于commonjs，commonjs是动态的模块系统，在哪里都可以调用

ESModule在编译时就可以确定模块的依赖关系，所以诞生了ES Module的规则 1、import只能作为模块顶层的语句出现，不能出现在function里，或是if里

由于ES Module静态的引用方式，编译时就可以获取模块依赖关系，所以就有了Tree shaking，摇树，将死了的叶子掉下来，同时也就是将模块内没有使用的代码就不会进行打包，减少体积。例如：a.js有2个export function，b.js 使用了a.js的一个function，另一个function是不会被打包的

webpack和rollup的使用选择 webpack适用于app应用 类库或js项目rollup更加适合

webpack优点 强大的生态插件 面向开发的特性支持HMR，按需加载、公共模块提取 简化web开发的环节，资源的缓存

rollup的优点 构建高性能的模块文件 编译的代码可读性高，内容小，执行效率高 配置简单

打包什么类型的文件

conclusion：首要格式ES，并且支持ts type文件，备选方案：UMD

1、Commonjs、es6module需要特殊的module bundler支持，例如webpack，rollup

2、AMD已经有点过时了，需要使用特殊的Loader-requirejs

3、浏览器中直接使用UMD，通用的一种js格式，兼容commonjs，AMD和浏览器 缺陷 资源包太大，不支持tree shaking，很多UI组件库都会使用UMD格式的就是文件，让用户直接在html中以script直接引用 UMD的实现：antd.js

(function webpackUniversalModuleDefinition(root, factory) {
    // 如果在全局找到exports，意味着它是commonjs
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("moment"), require("react"), require("react-dom"));
    // 如果是AMD形式来写，全局会注入define
	else if(typeof define === 'function' && define.amd)
    // 以define的形式返回
		define(["moment", "react", "react-dom"], factory);
	else if(typeof exports === 'object')
    // commonjs方式导出
		exports["antd"] = factory(require("moment"), require("react"), require("react-dom"));
	else
    // 浏览器，直接挂全局
		root["antd"] = factory(root["moment"], root["React"], root["ReactDOM"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_moment__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) {

语法速记： commonjs语法 module.exports,exports ESModule语法：export，export default

SuiBu

Engineer