Rollup是一个JavaScript模块打包工具,它可以将多个模块打包成一个或多个输出文件。配置Rollup以允许多个入口点以及CJS(CommonJS)和ES(ECMAScript)模块的编译,可以通过以下步骤完成:
npm install rollup --save-dev
rollup.config.js
的文件,作为Rollup的配置文件。rollup.config.js
文件中,使用CommonJS语法导入所需的插件和模块:const commonjs = require('@rollup/plugin-commonjs');
const resolve = require('@rollup/plugin-node-resolve');
const { babel } = require('@rollup/plugin-babel');
module.exports = {
input: {
main: 'src/main.js',
moduleA: 'src/moduleA.js',
moduleB: 'src/moduleB.js'
},
output: {
dir: 'dist',
format: 'cjs',
sourcemap: true
},
plugins: [
resolve(),
commonjs(),
babel({ babelHelpers: 'bundled' })
]
};
在上述配置中,input
指定了多个入口点,分别是main
、moduleA
和moduleB
。output
指定了输出目录为dist
,输出格式为CommonJS(cjs
),并生成源映射文件。
package.json
文件中,添加一个脚本命令以运行Rollup:"scripts": {
"build": "rollup -c"
}
现在可以使用npm run build
命令来运行Rollup,并根据配置文件进行打包。
这样配置后,Rollup将会根据指定的入口点和模块之间的依赖关系,将它们打包成一个或多个输出文件。同时,通过使用@rollup/plugin-commonjs
插件和@rollup/plugin-node-resolve
插件,可以将CommonJS模块和Node.js模块转换为ES模块,以便在浏览器环境中使用。另外,@rollup/plugin-babel
插件可以用于将ES6+语法转换为ES5语法,以提供更好的浏览器兼容性。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云