rollup与webpack

这里侧重讲一下rollup，虽然之前有听过rollup，一直也没机会用到，最近在写组件库，看到里面用到了Rollup 专门去学习了下。相信大家都有听过一句话 webpack 是大而全，rollup 是小而美。那么接下来就看下它到底好在哪。

rollup简介

rollup是一个模块化打包工具，专门针对于类库打包，在打包时自动进行tree shaking，所以打包后的文件体积相比webpack会小很多。那在现实生活中，我们该怎么选择呢？

如果你的项目中需要code splitting，或者需要加载很多静态资源的时候就选择webpack，总的来说，webpack适用于大型项目。而rollup在处理cjs方面等特殊处理需要单独引入插件支持，也不支持HMR，在世纪的使用中需要引入插件来支持，在写组件库时rollup是最好的选择。我个人感觉webpack就像是vue，里面帮我们提供了很多开箱即用的功能，rollup像react，只提供一个基础功能，有一定的侧重性，其他功能由使用者自己去选择，灵活使用。

rollup配置

1.在根目录下新建一个rollup.config.js文件，来配置相关的模块，通过运行yarn rollup --config启动，也可以在package.json里面配置

export default {
    input: 'src/index.ts',
    output: {
        file: 'dist/bundle.js',
        formate: 'iife
    }
}

2.使用插件

由于rollup不能够直接读取node_modules中的依赖项，需要引入加载npm模块的插件：rollup-plugin-node-resolve
由于rollup默认只支持esm模块打包，所以需要引入插件来支持cjs模块：rollup-plugin-commonjs
如果需要读取json文件，需要引入json插件来支持json文件：rollup-plugin-json
字符串替换插件：rollup-plugin-replace
如果想要代码拆分就不能使用iife的方式导出，需要amd或者cjs方式

此时通过yarn rollup --config运行打包报错UMD and IIFE output formats are not supported for code-splitting builds，因为立即执行函数会将所有模块放入同一个函数，没法实现代码拆分，需使用amd或commonjs标准

3.实现多入口打包

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: ['src/index.js', 'src/hello.js'],
  output: {
    dir: 'dist',
    format: 'amd', // 构建浏览器使用的文件
  },
  plugins: [nodeResolve()],
};