crolup.js：下一代JavaScript模块Bundler
滚动。 与某些多合一捆绑包不同，汇总主要集中在JavaScript上，提供速度和自定义优势。 让我们探索其关键功能以及如何有效使用它。
使用lullup.js：：
crolup.js需要node.js v8.0.0或更高版本。 您可以在全球安装它：
>对于在Node.js项目上工作的大型团队，建议将本地安装用于版本一致性：
npm install rollup --global
>本地安装后，使用
npm install rollup --save-dev
脚本中定义汇总命令：npx rollup
package.json
"scripts": {
"watch": "npx rollup ./src/main.js --file ./build/bundle.js --format es --watch",
"build": "npx rollup ./src/main.js --file ./build/bundle.js --format es",
"help": "npx rollup --help"
}运行。 本教程主要用于更广泛的兼容性。npm run watch>
npm run buildnpx rollup一个简单的示例：
>让我们创建一个基本的数字时钟示例，以说明汇总功能。 您可以从github下载示例文件或手动创建它们。
src/main.js：
（主入口点）import * as dom from './lib/dom.js';
import { formatHMS } from './lib/time.js';
const clock = dom.get('.clock');
if (clock) {
console.log('initializing clock');
setInterval(() => {
clock.textContent = formatHMS();
}, 1000);
}export function get(selector, doc = document) {
return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
return doc.querySelectorAll(selector);
}function timePad(n) {
return String(n).padStart(2, '0');
}
export function formatHM(d = new Date()) {
return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
}
export function formatHMS(d = new Date()) {
return formatHM(d) + ':' + timePad(d.getSeconds());
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Rollup.js testing</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> </head> <body> <h1>Clock</h1> <time class="clock"></time> <🎜> <🎜> </body> </html>
这会创建。 请注意，未使用的功能将通过震动来删除。
参考这个捆绑文件。键滚动.js配置选项：
>--file或-o：指定输出文件名。--format>或-f：定义输出格式（iife，es，cjs，umd，amd，system，--sourcemap：生成一个源地图，以更轻松地调试（用于内联源图）。
--sourcemap inline--watch
/
-w
--config-c
rollup.config.js>配置文件简化了管理多个选项和插件。 这是一个示例：>以： 运行
插件：
npm install rollup --global
npx rollup --config
：andles node.js模块分辨率。 ：将COMPORJS模块转换为ES模块。
> ：在构建过程中替换代码中的代币。@rollup/plugin-node-resolve：将ES6代码转换为ES5（考虑现代浏览器支持的替代方案）。@rollup/plugin-commonjs：减去输出代码。@rollup/plugin-replace记住使用@rollup/plugin-buble中。rollup-plugin-terser高级技术：
npm install <plugin-name> --save-dev</plugin-name>>plugins>环境变量：rollup.config.js>使用环境变量（例如，
>多个捆绑包：
配置汇总以从不同的入口点生成多个捆绑。NODE_ENV>
以上是汇总介绍。的详细内容。更多信息请关注PHP中文网其他相关文章！
