汇总介绍。-js教程-PHP中文网

Clock

首页

web前端

js教程

汇总介绍。

尊渡假赌尊渡假赌尊渡假赌

Feb 10, 2025 pm 04:01 PM

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项目上工作的大型团队，建议将本地安装用于版本一致性：

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：

（主入口点）

> 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);
}

登录后复制

（时间格式化函数）

export function get(selector, doc = document) {
  return doc.querySelector(selector);
}
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}

登录后复制

（html显示时钟）

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 id="Clock">Clock</h1>
  <time class="clock"></time>
  <🎜>
  <🎜> </body>
</html>

登录后复制

捆绑代码，从项目的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>配置文件简化了管理多个选项和插件。这是一个示例：

>以：运行

插件：

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

本站声明

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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7915

Java教程

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1248

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。