数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用Rollup.js打包JavaScript文件？
在本教程中，我们将了解如何使用rollup.js来打包JavaScript文件。在开始之前，第一步是熟悉一个名为**Rollup**的JavaScript模块打包器，它可以将多个源文件编译成一个单独的包。Rollup类似于webpack和Browserify。由于它能够在将文件打包成单个单元后保持文件体积小巧，因此比许多其他打包器更受欢迎。
Rollup提供了多种功能，其中一些列举如下：
当您使用更小且独立的源文件时，开发更容易管理。
源代码可以轻松地进行美化、代码风格检查，并且可以在打包过程中进行语法检查。
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',
}
};
在上面的代码片段中，我们使用了不同的属性。让我详细解释一下每个属性。
**输入** - 在此字段中，我们提供要使用Rollup打包的文件的名称。在大多数情况下，此文件将是主JavaScript文件，它基本上启动了您的项目。
**输出** - 上述config.js文件中使用的输出对象包含两个属性，分别是文件和格式，其中文件包含将作为rollup输出创建的文件的名称，而格式字段包含我们想要的rollup的格式类型作为值。
在我们的config.js中，我们只是说当Rollup完成时，我们希望得到一个“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';
// 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}`);
});
您可以轻松注意到Rollup前后文件大小的差异。
在前面的示例中，我们打包到了通用的JavaScript格式，如我们在rollup.config.js文件的输出对象的格式属性中指定的。
假设我们希望将打包后的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
现在，如果我们打开“main.min.js”文件，它将是IIFE格式。
(function () {
'use strict';
// 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}`);
});
})();
可以清楚地看到该文件是IIFE格式。
结论
在本教程中，我们学习了如何使用Rollup.js将JavaScript文件打包成更小的尺寸，并打包成我们喜欢的格式。
498 次浏览
