zqy233的前端学习笔记介绍
Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式，而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许您自由无缝地组合您最喜欢的库中最有用的个别函数。这在未来将在所有场景原生支持，但 Rollup 让您今天就可以开始这样做。
起步
新建一个空项目，导入rollup
sh
pnpm i -D rollup
pnpm i -D rollup
新建src/main.js
js
import foo from './foo.js';
export default function () {
console.log(foo);
}
import foo from './foo.js';
export default function () {
console.log(foo);
}
新建src/foo.js
js
export default 'hello world!';
export default 'hello world!';
根目录新建rollup.config.js，这是rollup默认的配置文件，rollup会读取其中配置进行打包
js
export default {
// 入口
input: 'src/main.js',
// 出口（输出）
output: {
// 文件名
file: 'bundle.js',
// 打包格式为commonjs
format: 'cjs'
}
};
export default {
// 入口
input: 'src/main.js',
// 出口（输出）
output: {
// 文件名
file: 'bundle.js',
// 打包格式为commonjs
format: 'cjs'
}
};
package.json加入scripts， --config参数表示使用配置文件，即rollup.config.js
package.json加入"type": "module",，表示是es模块
json
"scripts": {
"build": "rollup --config"
},
"scripts": {
"build": "rollup --config"
},
npm run build后，生成bundle.js文件，内容就是main.js和foo.js打包后的代码
常用参数
-c, --config
使用配置文件，如果未指定配置文件，则默认为rollup.config.js
sh
-c, --config <filename>
-c, --config <filename>
w/--watch
当源文件在磁盘上发生变化时重新打包
strictDeprecations
报错来提醒废弃特性，常用于api变更的场景
rollup.config.js
总共有以下这些配置
js
export default {
// core input options
external,
input, // conditionally required
plugins,
// advanced input options
cache,
onwarn,
preserveEntrySignatures,
strictDeprecations,
// danger zone
acorn,
acornInjectPlugins,
context,
moduleContext,
preserveSymlinks,
shimMissingExports,
treeshake,
// experimental
experimentalCacheExpiry,
perf,
// required (can be an array, for multiple outputs)
output: {
// core output options
dir,
file,
format, // required
globals,
name,
plugins,
// advanced output options
assetFileNames,
banner,
chunkFileNames,
compact,
entryFileNames,
extend,
footer,
hoistTransitiveImports,
inlineDynamicImports,
interop,
intro,
manualChunks,
minifyInternalExports,
outro,
paths,
preserveModules,
preserveModulesRoot,
sourcemap,
sourcemapExcludeSources,
sourcemapFile,
sourcemapPathTransform,
validate,
// danger zone
amd,
esModule,
exports,
externalLiveBindings,
freeze,
indent,
namespaceToStringTag,
noConflict,
preferConst,
sanitizeFileName,
strict,
systemNullSetters
},
watch: {
buildDelay,
chokidar,
clearScreen,
skipWrite,
exclude,
include
}
};
export default {
// core input options
external,
input, // conditionally required
plugins,
// advanced input options
cache,
onwarn,
preserveEntrySignatures,
strictDeprecations,
// danger zone
acorn,
acornInjectPlugins,
context,
moduleContext,
preserveSymlinks,
shimMissingExports,
treeshake,
// experimental
experimentalCacheExpiry,
perf,
// required (can be an array, for multiple outputs)
output: {
// core output options
dir,
file,
format, // required
globals,
name,
plugins,
// advanced output options
assetFileNames,
banner,
chunkFileNames,
compact,
entryFileNames,
extend,
footer,
hoistTransitiveImports,
inlineDynamicImports,
interop,
intro,
manualChunks,
minifyInternalExports,
outro,
paths,
preserveModules,
preserveModulesRoot,
sourcemap,
sourcemapExcludeSources,
sourcemapFile,
sourcemapPathTransform,
validate,
// danger zone
amd,
esModule,
exports,
externalLiveBindings,
freeze,
indent,
namespaceToStringTag,
noConflict,
preferConst,
sanitizeFileName,
strict,
systemNullSetters
},
watch: {
buildDelay,
chokidar,
clearScreen,
skipWrite,
exclude,
include
}
};