深入了解rollup（二）常用配置-阿里云开发者社区

引言

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的一部分，它还有很多配置和技巧可以使用。

深入了解rollup（二）常用配置

引言

常用的基本配置

多产物配置

多入口配置

动态导入与默认代码分割

插件使用

总结

热门文章

最新文章

相关电子书