首页 >web前端 >js教程 >汇总介绍。

汇总介绍。

尊渡假赌尊渡假赌尊渡假赌原创: 2025-02-10 16:01:10648浏览

crolup.js：下一代JavaScript模块Bundler

An Introduction to the Rollup.js JavaScript Bundler

由Rich Harris（也是Svelte的作者）创建的

滚动。与某些多合一捆绑包不同，汇总主要集中在JavaScript上，提供速度和自定义优势。让我们探索其关键功能以及如何有效使用它。

使用lullup.js：

：

简化的开发：
在构建过程中， 增强的代码质量：在构建过程中与衬里，格式化器和语法检查器无缝集成。
摇树优化：智能地删除未使用的代码，导致捆绑较小，更快。
向后兼容：将现代JavaScript（ES6）转换为ES5，确保更广泛的浏览器支持。
灵活的输出：生成多个输出格式（ES5，ES6模块，commonjs），以适应各种项目需求。>
通常比其他捆绑器更快，更自定义，尤其是使用复杂的配置。>

>安装：

crolup.js需要node.js v8.0.0或更高版本。您可以在全球安装它：

>对于在Node.js项目上工作的大型团队，建议将本地安装用于版本一致性：

<code class="language-bash">npm install rollup --global</code>

>本地安装后，使用

<code class="language-bash">npm install rollup --save-dev</code>

>执行命令。或者，在

脚本中定义汇总命令：npx rollup package.json

这些脚本可以使用

<code class="language-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"
}</code>

>或

运行。本教程主要用于更广泛的兼容性。npm run watch> npm run buildnpx rollup一个简单的示例：

>让我们创建一个基本的数字时钟示例，以说明汇总功能。您可以从github下载示例文件或手动创建它们。

src/main.js：

（主入口点）

> src/lib/dom.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);
}

（时间格式化函数）

<code class="language-javascript">export function get(selector, doc = document) {
  return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}</code>

（html显示时钟）

<code class="language-javascript">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());
}</code>

快速启动：

<code class="language-html"><!DOCTYPE html>


  <meta charset="UTF-8">
  <title>Rollup.js testing</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">


  <h1>Clock</h1>
  <time class="clock"></time>
  
   
</code>

捆绑代码，从项目的root目录运行此命令：>

这会创建。请注意，未使用的功能将通过震动来删除。

参考这个捆绑文件。

键滚动.js配置选项：

--file或-o：指定输出文件名。
--format>或-f：定义输出格式（iife，es，cjs，umd，amd，system，
--sourcemap：生成一个源地图，以更轻松地调试（用于内联源图）。 --sourcemap inline
：观看文件更改并自动重建。--watch / -w
>配置文件（rolup.config.js）：--config-c rollup.config.js>配置文件简化了管理多个选项和插件。这是一个示例：

>以：运行

插件：

<code class="language-bash">npm install rollup --global</code>

> 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中文网其他相关文章！

JavaScript json html es6 npm Array define for date format include Directory using map JS dom this display github Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Set Up VS Code for React Development下一篇：Getting Started with Puppeteer

查看更多