1. 背景
在前端开发中，我们通常需要将多个 JavaScript 模块打包成一个文件，以提高页面的加载速度和性能。而 Rollup 是一个 JavaScript 模块打包工具，可以将多个 JavaScript 模块打包成一个文件，同时还能优化打包结果，从而提高页面的加载速度和性能。
rollup-starter 是一个 npm 包，它内置了 Rollup 的一些常用配置和插件，可以帮助我们更快地开发出高质量的 JavaScript 模块。
本文将详细介绍如何使用 rollup-starter 进行 JavaScript 模块开发。
2. 安装
首先，我们需要在本地安装 rollup-starter：
npm install rollup-starter --save-dev
3. 使用
3.1 创建项目
在终端中执行以下命令，创建一个 rollup-starter 项目：
npx rollup-starter my-project
其中，my-project 为项目名称，可以根据实际情况自行替换。
3.2 目录结构
创建成功后，项目目录结构如下：
-- -------------------- ---- ------- ---------- --- --- - --- -------- - --- --------- - --- -------- --- ---- --- ------------ --- ---------------- --- ---------
其中，src 目录用于存放 JavaScript 模块，dist 目录用于存放打包后的 JavaScript 文件。
3.3 编写代码
在 src 目录中，我们可以编写自己的 JavaScript 模块。例如，我们可以创建一个 utils.js 文件，用于封装一些通用工具函数：
export const add = (a, b) => {
return a + b;
};
export const sub = (a, b) => {
return a - b;
};此外，我们还可以创建一个 module.js 文件，用于导入和使用 utils.js 文件中的函数：
-- -------------------- ---- ------- ------ - ---- --- - ---- ------------- ------ ----- ---- - --------- ------ ----- --- - --- -- -- - ------ ------ --- -- ------ ----- ---------- - --- -- -- - ------ ------ --- --
最后，我们需要创建一个 index.js 文件，用于导入和使用 module.js 文件中的函数：
import { name, sum, difference } from './module.js';
console.log(`name is ${name}`);
console.log(`2 + 3 = ${sum(2, 3)}`);
console.log(`5 - 2 = ${difference(5, 2)}`);3.4 配置文件
我们还需要编写一个 rollup.config.js 配置文件，指定打包的入口文件和输出文件：
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
},
};其中，input 指定打包的入口文件，output 指定打包后的输出文件及其格式，此处我们指定打包为 ESM 格式。
3.5 打包
最后，我们可以在终端中执行以下命令，进行打包：
npm run build
执行成功后，打包后的 JavaScript 文件会自动保存在 dist 目录中。
3.6 使用示例
我们可以在 index.js 中导入 jQuery，并使用其功能来操作 DOM。
首先，在项目目录中执行以下命令，安装 jQuery：
npm install jquery --save-dev
然后，我们可以修改 index.js 文件，使用 jQuery 获取并修改页面中的元素：
-- -------------------- ---- ------- ------ - ----- ---- ---------- - ---- -------------- ------ - ---- --------- ----------------- -- ---------- -------------- - - - -------- ------ -------------- - - - --------------- ------ -------------------- -- - -------------------- ---------- ---
最后，我们重新执行以下打包命令，即可生成包含 jQuery 的 JavaScript 文件：
npm run build
4. 总结
通过本文的介绍，我们可以学习到如何使用 rollup-starter 进行 JavaScript 模块开发，同时还了解了 Rollup 打包工具的基本使用。
总体来说，rollup-starter 是一个非常便捷的 npm 包，可以帮助我们更快、更方便地完成 JavaScript 模块的开发，并且它内置的 Rollup 插件和常用配置可以帮助我们优化打包结果，在提高页面加载速度和性能方面具有非常重要的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551ff81e8991b448cf84f