前言
在前端开发过程中，我们常常需要在项目中使用 rollup 工具对代码进行打包和优化。而在使用 rollup 时，我们又常常需要编写一些 rollup.config.js 的配置文件去进行一些自定义配置。如果每个项目都需要手动编写一遍 rollup.config.js，就会显得繁琐而低效。因此，有些开发者就开发了一些 npm 包方便我们使用。其中就包括 @mqschwanda/rollup-scripts 这个 npm 包。
@mqschwanda/rollup-scripts 是一个基于 Rollup 的打包构建工具，运行环境是 Node.js。该工具可以快速帮助你完成项目的打包构建。本篇文章将详细讲解 @mqschwanda/rollup-scripts 的使用方法。
安装
首先，我们需要在项目中安装 @mqschwanda/rollup-scripts 包。在命令行中输入以下命令，即可完成安装：
npm i -D @mqschwanda/rollup-scripts
使用
@mqschwanda/rollup-scripts 在安装完成后，我们需要在项目的 package.json 文件中添加命令行脚本，来以 rollup-scripts 运行该脚本。
如下是一个示例 package.json 文件中的 rollup-scripts 命令：
{
"scripts": {
"build": "rollup-scripts build src/index.js -o dist/bundle.js",
"dev": "rollup-scripts dev src/index.js -w"
}
}其中，build 命令用于打包构建，dev 命令用于开发调试。下面我们将详细讲解这两个命令的使用方法。
build 命令
build 命令用于打包构建项目，并将文件输出到指定目录下。如果你想生成一个 JavaScript 包（例如一个 NPM 包），则需要将输出目录设置为 dist/bundle.js，并向其添加 "main" 字段到你的 project's package.json 中：
{
"scripts": {
"build": "rollup-scripts build src/index.js -o dist/bundle.js",
"dev": "rollup-scripts dev src/index.js -w"
},
"main": "dist/bundle.js"
}同时，使用 @mqschwanda/rollup-scripts 的 build 命令，还可以支持以下一些参数：
| 参数 | 描述 |
|---|---|
| -o, --output | 输出路径 |
| -i, --input | 入口文件 |
| -f, --format | 输出文件格式（iife, esm, cjs） |
| -w, --watch | 开启监听 |
| -e, --env | 根据传入的 env 变量决定使用哪个配置（生产/开发） |
示例代码：
-- -------------------- ---- ------- - ---- -------------- ----- ------------ -- -------------- - ---- ---- -- -------------- ----- ------------ -- -------------- -- ---- - ----------- -------------- ----- ------------ -- -------------- -- - ---------------- --- ------------ -------------- ----- ------------ -- -------------- -- -----------
dev 命令
dev 命令用于开发调试项目。该命令会运行一个开发服务器，并实时监测代码变化，自动重新构建项目，以帮助开发者快速进行开发。
使用 @mqschwanda/rollup-scripts 的 dev 命令，也可以支持以下一些参数：
| 参数 | 描述 |
|---|---|
| -p, --port | 开发服务器端口 |
| -w, --watch | 监听文件变化并重新构建 |
示例代码：
# 启动开发服务器，并监听文件变化 rollup-scripts dev src/index.js -w # 启动开发服务器，并指定端口号为 3000 rollup-scripts dev src/index.js -p 3000 # 启动开发服务器，并指定端口号为 3000，同时监听文件变化 rollup-scripts dev src/index.js -p 3000 -w
结语
本篇文章详细讲解了 npm 包 @mqschwanda/rollup-scripts 的使用方法。通过使用这个工具，我们可以省去手动编写 rollup.config.js 的麻烦，快速搭建项目打包构建系统，并支持开发调试。希望可以帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/113444