如何使用 Rollup.js 打包 JavaScript 文件?
在本教程中，我们将了解如何使用 rollup.js 打包 JavaScript 文件。在此之前，第一步是熟悉名为 Rollup 的 JavaScript 模块打包器，它将多个源的文件编译成一个包。Rollup 类似于 webpack 和 Browserify。它比其他许多打包器更受欢迎，因为它能够将文件打包成一个单元后仍保持较小。
Rollup 提供了多种功能，其中一些功能如下所述 -
当您使用较小且独立的源文件时，开发更容易管理。
源代码可以轻松美化、linted，并且可以在打包过程中进行语法检查。
Tree-shaking 也有助于删除未使用的函数。
我们甚至可以转换为 ES5 以实现向后兼容。
还可以删除日志记录，甚至生产包也可以最小化。
现在我们对 Rollup 有了大致的了解，让我们首先创建一个简单的 JavaScript 项目。
假设我们有一个名为"rest-api-example"的项目，其目录结构如下所示 -
├── controller │ └── books.js ├── package-lock.json ├── package.json ├── routes └── books.js └── src ├── index.js 3 directories, 5 files
我们可以看到我们有多个文件和目录，而我们需要关注的唯一文件是"src"目录中的"index.js"文件。
index.js
这个index.js文件是我们将尝试借助Rollup.js以不同格式捆绑的文件。index.js文件的代码如下所示。
// to require the framework
const app = require('fastify')({
logger: true
})
app.addHook('onRoute', (routeOptions) => {
console.log(`Routes that are registered are: ${routeOptions.url}`)
})
// to declare a single route
app.get('/', function (req, reply) {
reply.send({
Welcome: 'TutorialsPoint'
})
})
// Register routes to handle blog posts
const bookRoutes = require('../routes/books')
bookRoutes.forEach((route, index) => {
app.route(route)
})
// Run the server!
app.listen(3000, (err, address) => {
if (err) {
app.log.error(err)
process.exit(1)
}
app.log.info(`The server is listening on ${address}`)
})
在此代码中，我们可以看到我们使用了常见的 JavaScript 箭头函数和基本语法。
将 Rollup 安装为依赖项
假设我们想在 Rollup.js 的帮助下捆绑此 JavaScript 文件。为此，我们首先需要将 Rollup 安装为项目中的依赖项。
以下命令将在您的项目中安装 Rollup。
npm install --save-dev rollup
package.json
运行上述命令后，我们应该在"package.json"文件中看到 rollup 依赖项。我的项目的"package.json"文件的内容如下所示，以供参考。
{
"name": "fastify-rest-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"fastify": "^4.2.1"
},
"devDependencies": {
"rollup": "^2.77.0"
}
}
rollup.config.js
安装 Rollup 后，下一步是在"package.json"所在的同一根位置创建一个新文件，并将该文件命名为 rollup.config.js。
注意 - 应为 Rollup 配置文件指定准确的名称。
下面显示的代码片段是我的 rollup.config.js 文件。
export default {
input: 'src/index.js',
output: {
file: 'src/main.min.js',
: 'cjs',
}
};
在上面的代码片段中，我们使用了不同的属性。让我详细解释一下它们。
输入 − 在此字段中，我们提供要汇总的文件的名称。在大多数情况下，此文件将是主要的 JavaScript 文件，基本上可以启动您的项目。
输出 − 上述 config.js 文件中使用的输出对象包含两个属性，即文件和格式，其中文件包含将作为汇总输出创建的文件的名称，格式字段包含格式类型作为我们想要的汇总值。
在我们的 config.js 中，我们只是说我们希望在汇总完成时有一个"cjs"文件作为输出。
启动 Rollup.js
为了实际启动 Rollup 并对其进行测试，我们需要在终端中运行以下命令。
./node_modules/.bin/rollup -c
一旦我们运行上述命令，我们将在终端中获得以下输出。
src/index.js → src/main.min.js... created src/main.min.js in 13ms
请注意，编译时间因机器而异。现在，如果我们检查目录树，它应该看起来像这样。
├── controller │ └── books.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── routes │ └── books.js └── src ├── index.js └── main.min.js
main.min.js
在上面的树结构中，我们可以看到创建了一个名为"main.min.js"的新文件。打开该文件，它应该与下面显示的文件完全相同。
'use strict';
// 要求框架
const app = require('fastify')({
logger: true
});
app.addHook('onRoute', (routeOptions) => {
console.log(`已注册的路由为:${routeOptions.url}`);
});
// 声明单个路由
app.get('/', function (req, reply) {
reply.send({
Welcome: 'TutorialsPoint'
});
});
// 注册路由以处理博客文章
const bookRoutes = require('../routes/books');
bookRoutes.forEach((route, index) => {
app.route(route);
});
// 运行服务器!
app.listen(3000, (err, address) => {
if (err) {
app.log.error(err);
process.exit(1);
}
app.log.info(`The server is listening on ${address}`);
});
您可以轻松注意到 Rollup 前后文件大小的差异。
在前面的示例中，我们汇总到常见的 JavaScript 格式，正如我们在 rollup.config.js 文件内的输出对象的 format 属性中提到的那样。
假设我们想将捆绑的 JS 设置为 iife 格式。为此，我们可以在 rollup.config.js 文件中更改格式。
rollup.config.js
请考虑下面显示的更新后的 rollup.config.js 文件。
export default {
input: 'src/index.js',
output: {
file: 'src/main.min.js',
format: 'iife',
}
};
请注意，我们只需要更改 rollup.config.js 文件中格式字段的值，一切就绪了。
为了实际捆绑文件，我们需要运行下面显示的命令:
./node_modules/.bin/rollup -c
输出
运行上述命令后，我们将在终端中获得以下输出 −
src/index.js → src/main.min.js... created src/main.min.js in 16ms
Now if we open the " main.min.js" file, it will be in IIFE format.
(function () {
'use strict';
// 需要框架
const app = require('fastify')({
logger: true
});
app.addHook('onRoute', (routeOptions) => {
console.log(`已注册的路由为:${routeOptions.url}`);
});
// 声明单个路由
app.get('/', function (req, reply) {
reply.send({
Welcome: 'TutorialsPoint'
});
});
// 注册路由以处理博客文章
const bookRoutes = require('../routes/books');
bookRoutes.forEach((route, index) => {
app.route(route);
});
// 运行服务器!
app.listen(3000, (err, address) => {
if (err) {
app.log.error(err);
process.exit(1);
}
app.log.info(`The server is listening on ${address}`);
});
})();
可以清楚地看到该文件是 IIFE 格式。
结论
在本教程中，我们学习了如何借助 Rollup.js 将 JavaScript 文件打包成更小的尺寸和我们喜欢的格式。
