虽然 Rollup 对于打包 JS 类库和组件有针对性的优势，但它也支持项目层面的打包配置。
社区提供了大量的插件，来丰富 Rollup 的功能。
但是相比 Gulp 和 Webpack 来说，Rollup 在项目层面的打包，优势不大。
因此本节内容，作为了解即可。实际项目开发中，不建议单方面的应用 Rollup。
同大多数打包工具类似，在配置中，也将项目划分为开发环境和生产环境。
js
const getBaseConfig = require('./config/index.js')
const generateHtmlConfig = require('./config/generateHtml.js')
const serve = require('rollup-plugin-serve')
const livereload = require('rollup-plugin-livereload')
const { terser } = require('rollup-plugin-terser')
const postcss = require('rollup-plugin-postcss')
const html = require('@rollup/plugin-html')
const copy = require('rollup-plugin-copy')
module.exports = (args) => {
const format = 'umd'
const baseConfig = getBaseConfig({ format })
const { environment } = args
const plugins = environment ? [
copy({
targets: [{
src: 'lib/',
dest: 'dist/'
}]
}),
html(generateHtmlConfig(format))
] : []
if (environment === 'PROD') {
plugins.push(
postcss({
extract: true
}),
terser()
)
} else if (environment === 'DEV') {
plugins.push(
postcss({
extract: false
}),
serve({
host: '10.0.41.35',
port: 10001,
contentBase: 'dist'
}),
livereload({
delay: 300
})
)
}
baseConfig.plugins.push(...plugins)
return baseConfig
}另外，也可以自定义 HTML 模板，这里采用了 @rollup/plugin-html 插件：
js
module.exports = (format) => {
return {
title: 'Hello Rollup',
template: ({ bundle, files, publicPath, title }) => {
const getScriptDom = ({ publicPath, file }) => {
return format === 'es' ? `<script type="module" src="${publicPath}${file.fileName}"></script>` : `<script src="${publicPath}${file.fileName}"></script>`
}
const script = files.js ? files.js.map(file => getScriptDom({ publicPath, file })).join('\n') : ''
const styles = files.css ? files.css.map(file => `<link rel="stylesheet" href="${publicPath}${file.fileName}">`).join('\n') : ''
return `<!DOCTYPE html>
<html>
<head>
<title>${title}</title>
${styles}
</head>
<body>
<div id="app">
<p class="title"></p>
<p id="time-now"></p>
</div>
<script src="./lib/jquery-3.6.4.min.js"></script>
${script}
</body>
</html>
`
}
}
}