引言
Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的常用配置的使用方法。
常用的基本配置
下面是一些常用的Rollup配置及示例说明：
1. input：指定要打包的入口文件路径。可以是单个文件路径或一个包含多个入口文件的对象。
exportdefault { input: 'src/main.js', // 或者input: { main: 'src/main.js', app: 'src/app.js' }, // ...}
2. output：指定打包后的输出文件路径及格式。可以是单个输出配置对象或一个包含多个输出配置对象的数组。
exportdefault { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'umd', name: 'MyLibrary' }, // 或者output: [ { file: 'dist/bundle1.js', format: 'umd', name: 'MyLibrary1' }, { file: 'dist/bundle2.js', format: 'esm' } ], // ...}
3. plugins：使用插件可以扩展Rollup的功能。可以是单个插件实例或一个包含多个插件实例的数组。
import { terser } from'rollup-plugin-terser'; importresolvefrom'@rollup/plugin-node-resolve'; exportdefault { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'umd' }, plugins: [ terser(), // 压缩代码resolve() // 解析第三方模块 ], }
4. external：指定不需要打包的外部依赖库。可以是一个字符串、一个正则表达式、一个函数或一个包含多个匹配规则的数组。
exportdefault { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'umd' }, external: ['lodash'], // 不打包lodash库// 或者external: id=>/^lodash/.test(id), // 不打包以lodash开头的模块// ...}
5. treeshake：指定是否开启摇树优化，即只打包使用到的代码。默认为true。
exportdefault { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'umd' }, treeshake: true, // 开启摇树优化// ...}
6. watch：指定是否开启监听模式，即文件变动时自动重新打包。默认为false。
exportdefault { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'umd' }, watch: true, // 开启监听模式// ...}
7. 模块解析（resolve）：指定模块的解析方式，例如别名、扩展名等。
exportdefault { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'umd', }, resolve: { alias: { '@': './src', // 别名配置 }, extensions: ['.js', '.jsx'], // 扩展名配置 }, // ...}
多产物配置
可以通过配置多个输出对象来实现。每个输出对象都可以指定不同的输出文件路径、格式和其他属性。
我们可以将 output 改造成一个数组，对外暴露出不同格式的产物供他人使用，不仅包括 ESM，也需要包括诸如CommonJS、UMD等格式。
import { defineConfig } from'rollup'exportdefaultdefineConfig({ input: 'src/index.js', output: [ { file: 'dist/bundle-iife.js', format: 'iife' }, { file: 'dist/bundle-esm.js', format: 'esm' }, { file: 'dist/bundle-cjs.js', format: 'cjs' }, { file: 'dist/bundle-umd.js', format: 'umd', name: 'bundle' } ], })
通过这种方式，可以根据需要生成不同格式的产物，以满足不同环境或使用场景的需求。
需要注意的是，每个输出对象可以有自己独立的属性配置，例如name、sourcemap等。可以根据具体需求在每个输出对象中进行相应配置。
多入口配置
以下是rollup的多入口示例，包括多入口一个产物，多入口多个产物，每个入口对应一种构建方式的情况示例：
- 多入口一个产物：
// rollup.config.jsexportdefault { input: { main: 'src/main.js', admin: 'src/admin.js' }, output: { file: 'dist/bundle.js', format: 'iife' } }
上述配置中，input指定了两个入口文件main.js和admin.js，output指定了生成的产物文件为bundle.js。
- 多入口多个产物：
// rollup.config.jsexportdefault [ { input: 'src/main.js', output: { file: 'dist/main-bundle.js', format: 'iife' } }, { input: 'src/admin.js', output: { file: 'dist/admin-bundle.js', format: 'iife' } } ]
上述配置中，通过数组形式指定了两个配置对象，每个配置对象分别对应一个入口文件和一个输出文件。
- 每个入口对应一种构建方式：
// rollup.config.jsexportdefault [ { input: 'src/main.js', output: { file: 'dist/main-bundle.cjs.js', format: 'cjs' } }, { input: 'src/admin.js', output: { file: 'dist/admin-bundle.esm.js', format: 'esm' } } ]
上述配置中，通过指定不同的format属性，可以分别生成CommonJS和ES模块的产物文件。
以上是rollup的多入口示例，可以根据实际需求进行配置。
动态导入与默认代码分割
以下是rollup的动态导入与默认代码分割的示例：
- 动态导入示例：
// main.jsimport('./module.js').then(module=> { module.default(); });
上述代码中，使用动态导入的方式引入了module.js模块，并在then回调中调用了模块的默认导出函数。
- 默认代码分割示例：
// rollup.config.jsexportdefault { input: 'src/main.js', output: { dir: 'dist', format: 'esm', chunkFileNames: '[name]-[hash].js' }, plugins: [ // 插件配置 ] }
上述配置中，通过设置output.dir属性指定输出目录，设置output.chunkFileNames属性为 [name]-[hash].js，这样每个代码分割出来的模块都会生成一个独立的文件。
- 动态导入与默认代码分割结合示例：
// main.jsimport('./module.js').then(module=> { module.default(); });
// module.jsexportdefaultfunction() { console.log('Hello from module'); }
// rollup.config.jsexportdefault { input: 'src/main.js', output: { dir: 'dist', format: 'esm', chunkFileNames: '[name]-[hash].js' }, plugins: [ // 插件配置 ] }
上述示例中，通过动态导入方式引入了module.js模块，并在then回调中调用了模块的默认导出函数。同时，配置了默认的代码分割，将module.js模块分割为一个独立的文件。
打包后的文件结构
插件使用
比如我们现在引入lodash-es库
npm install lodash-es -D
在index.js中使用
import { chunk } from"lodash-es"; constresult=chunk([1, 2, 3, 4], 2); console.log({ result })
现在直接打包
exportdefault { input: 'src/index.js', output: { dir: 'dist/esm/', format: 'esm', } }
会出现下面的警告：
点击链接看了下，大致意思就是不能解析lodash-es这个依赖，报出了警告，问是不是需要加上external，也就是把lodash-es这个库给排除出去。
默认情况下，Rollup 只解析相对模块。这意味着像这样的 import 语句
import { chunk } from'lodash-es'
不会导致 lodash-es 被打包到你的包中——相反，它将是运行时需要的外部依赖项。如果这就是你想要的，你可以用 external 选项消除这个警告。
exportdefault { input: 'src/index.js', output: { dir: 'dist/esm/', format: 'esm', }, external: ['lodash-es'], // 消除警告}
再次打包就没问题了。
如果你确实想在打包后的代码中包含这个模块，需要告诉 Rollup 如何找到它。大多数情况下，你可以使用 @rollup/plugin-node-resolve
安装:
npm install @rollup/plugin-node-resolve -D
使用：
import { nodeResolve } from'@rollup/plugin-node-resolve'; exportdefault { input: 'src/index.js', output: { dir: 'dist/esm/', format: 'esm', }, plugins: [nodeResolve()] // external: ['lodash-es'], // 消除警告}
现在，再次进行打包，无论是打包时间，还是打包内容和之前都很不一样了，把lodash-es中，关于chunk()函数的内容，都打包进了index.js文件中
对于动态加载模块，rollup帮我们自动做了代码分割，其实我们也可以手动的操作，直接在rollup配置中声明
import { nodeResolve } from'@rollup/plugin-node-resolve'; exportdefault { input: 'src/index.js', output: { dir: 'dist/esm/', format: 'esm', entryFileNames: '[name].[hash].js', chunkFileNames: 'chunk-[name].[hash].js', manualChunks: { 'lodash-es': ['lodash-es'] } }, plugins: [nodeResolve()] // external: ['lodash-es'], // 消除警告}
总结
总的来说，它是一个强大而灵活的工具，适用于各种规模和类型的JavaScript项目。在本文中介绍了一些常用的配置rollup的动态导入和代码分割以及插件使用。这些只是rollup的一部分，它还有很多配置和技巧可以使用。
