网站首页编程语言正文

rollup命令行介绍

作者：jieyucx 更新时间： 2023-07-25 编程语言

一、什么是rollup

Rollup是一个JavaScript模块打包器，它可以将多个JavaScript模块打包成一个文件。与其他打包工具不同，Rollup专注于打包ES6模块，这使得输出的JavaScript文件更加优化和轻量化。Rollup还支持插件系统，可以通过插件实现各种自定义行为，例如将CSS文件打包成单独的文件或优化输出的JavaScript文件。Rollup是一个快速、简单和优化的打包工具，特别适合打包库和组件。

二、rollup和webpack对比

对比项	Rollup	Webpack
适用范围	专注于打包 ES6 模块，适用于构建 JavaScript 库和组件	适用于构建复杂的应用程序，包括处理 JS、CSS、图片等
打包速度	较快，因为可以利用 ES6 模块语法进行静态分析和优化	相对较慢，因为需要进行更多的代码转换和处理
代码拆分	支持代码拆分，并且可以生成多个输出文件	支持代码拆分，但是需要手动配置
插件生态	插件生态较小，但是可以使用 Rollup.js 插件转换工具将其他插件转换为 Rollup 插件	插件生态丰富，社区活跃
配置复杂性	配置相对简单，但是需要手动处理 CSS、图片等资源文件	配置较为复杂，但是可以使用社区提供的现成配置模板
代码质量	生成的代码质量较高，可读性强，并且支持 Tree Shaking	生成的代码质量较低，可读性差，可能存在冗余代码
开发体验	支持实时构建和热更新，开发体验良好	支持实时构建和热更新

三、rollup常用命令行

Rollup 是一个 JavaScript 模块打包器，可以将多个 JavaScript 模块打包成一个文件，方便应用程序的开发和部署。常用的 Rollup 命令包括以下几个：

1. rollup --help

rollup --help 是一个命令行指令，它展示了 Rollup 提供的所有命令行选项和参数，可以帮助用户了解 Rollup 的使用方法和配置选项。

在命令行中运行 rollup --help，则会展示 Rollup 所有的命令行选项和参数，例如：

Usage: rollup [options]

Options:
  -c, --config <filename>               use this config file (if argument is
                                        omitted, rollup.config.js will be
                                        used if it exists, or else
                                        rollup.config.ts)
  -i, --input <files...>                the entry point(s) of your
                                        application/module
  -o, --file <output>                   the output file (if absent, prints to
                                        stdout)
  -d, --dir <outputDirectory>           the directory in which to place
                                        outputted files
  -f, --format <format>                 the format of the generated bundle
                                        (amd, cjs, es, iife, umd, system)
  -e, --external <ids...>               make this module id external
  -g, --globals <pairs...>              specify global variable names to use,
                                        e.g. -g jquery:$,React:MyReact
  -n, --name <name>                     the name to use for the generated
                                        module bundle (required for IIFE
                                        /UMD)
  -w, --watch                           watch files in bundle for changes
  --watch-stdin                         [experimental] read bundle config from
                                        stdin
  --experimental-optimizations          [experimental] enable additional
                                        experimental code optimizations
  --no-treeshake                        disable tree shaking
  --silent                              suppresses logging
  --intro <intro>                       content to insert at top of bundle
  --outro <outro>                       content to insert at end of bundle
  --banner <banner>                     content to insert at top of output
  --footer <footer>                     content to insert at end of output
  -m, --sourcemap                       generate sourcemap (`-m inline` for
                                        inline map)
  --sourcemap-file <path>               file to write sourcemap to (or use
                                        `--dir` and `--sourcemap-path`
                                        together)
  --sourcemap-path-transform <function> transform the generated sourcemap
                                        path, e.g. `--sourcemap-
                                        path-transform '{"foo": "bar" }'`
                                        changes `path/to/file.js` to
                                        `{foo}/file.js`
  --silent                              suppresses logging
  --no-progress                         do not print progress updates
  --config-stdin                        read config from stdin
  --config-branch <branchName>          select a branch of the exported
                                        configuration (default: `main`)
  --config-plugins <commaSeparatedList> plugins to use (default: all)
  --config-search <searchDir>           use the specified directory as the
                                        root for resolving configurations
                                        (default: `process.cwd()`)
  --config-env <envName>                 environment variables to expose when
                                        loading the config file
  --no-interop                          do not generate an `interop` block
  -h, --help                            output usage information

其中，简写 -c 表示 --config，简写 -i 表示 --input，简写 -o 表示 --file，简写 -d 表示 --dir，以此类推。

例如，如果我们希望打包一个文件，并同时监听文件变化，可以运行如下的命令：

rollup -i input.js -o output.js -w

这将会将 input.js 打包成 output.js 文件，并监听文件变化，一旦文件变化就重新打包。

2. rollup --version

rollup --version

在这里插入图片描述

rollup --version是一个命令行指令，用于显示当前安装的Rollup版本号。Rollup是一个JavaScript模块打包工具，用于将多个JavaScript模块打包成一个或多个单独的文件。

举个例子，假设你的项目使用了Rollup来打包多个JavaScript模块，但是在构建过程中出现了问题，你需要知道当前安装的Rollup版本号，以便判断是否是版本问题导致的错误。你可以在命令行中输入rollup --version来获取当前Rollup版本号，从而确定是否需要更新Rollup或使用不同的版本来解决问题。

3. rollup：打包入口文件并生成一个文件输出。

rollup -i input.js -o output.js

rollup -i input.js -o output.js是一个命令行指令，它使用了 Rollup 来将指定的输入文件 input.js 打包并输出到指定的输出文件 output.js 中。

Rollup 是一款 JavaScript 模块打包器，它可以将代码中的 ES6 模块语法转换为标准的 ES5 语法，并将代码打包成一个或多个文件，以便于在浏览器或 Node.js 环境中使用。

以下是一个示例：

假设我们有如下的目录结构：

my-project/
├── src/
│   ├── main.js
│   ├── module1.js
│   └── module2.js
├── dist/
│   └── bundle.js
└── package.json

我们希望将 src/main.js 和其依赖的模块打包到一个文件中，并输出到 dist/bundle.js 中。

我们可以在命令行中运行以下指令：

rollup -i src/main.js -o dist/bundle.js

这将会把 src/main.js 中引用的 src/module1.js 和 src/module2.js 打包进一个文件，输出到 dist/bundle.js 中。

现在我们可以在 HTML 文件中引入打包后的文件，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My App</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

这样，在浏览器中加载 HTML 文件时，就会自动载入打包后的 JavaScript 文件，并执行其中的代码。

4. rollup -i index.js --file dist.js --format cjs

rollup -i index.js --file dist.js --format cjs

rollup -i index.js --file dist.js --format cjs 的作用是使用 Rollup 打包index.js 文件，将打包后的代码输出到 dist.js 中，并使用CommonJS格式进行输出。其中，--format 参数指定了打包后的输出格式。

除了cjs格式外，Rollup 还支持以下几种格式：

iife：将代码作为立即调用函数表达式（Immediately Invoked Function Expression，IIFE）输出，适合于直接在浏览器中使用的代码。
umd：将代码同时支持在浏览器和 Node.js 环境中使用。如果引入的环境支持 AMD 或 CommonJS 模块系统，则代码以模块的方式输出；否则，代码被包裹在一个 IIFE 中输出。
amd：将代码以 AMD 模块格式输出，适合于在 AMD 环境中使用的代码。

举例说明：

如果要将代码打包成IIFE格式，可以使用以下命令：

rollup -i index.js --file dist.js --format iife

如果要将代码打包成 umd 格式，可以使用以下命令：

rollup -i index.js --file dist.js --format umd --name myLibrary

其中，--name 参数指定了在浏览器环境中暴露出去的全局变量名。如果不指定 --name 参数，则默认使用打包后的文件名作为全局变量名。

5. rollup -i index.js -i test.js --dir dist: 将多个入口文件打包到一个文件夹下

rollup -i index.js -i test.js --dir dist

这条命令用于将多个 JavaScript 文件打包成单个文件，并将打包后的文件输出到指定的目录中。

其中，-i 表示需要打包的入口文件，可以指定多个入口文件，使用空格分隔。--dir 表示输出目录，即打包后的文件输出到哪个目录中。

例如，假设有以下两个 JavaScript 文件：

index.js：包含项目的主要代码逻辑。
test.js：用于测试的代码。

如果运行以下命令：

rollup -i index.js -i test.js --dir dist

则会将 index.js 和 test.js 打包成单个文件，并将打包后的文件输出到 dist 目录中。生成的文件名和格式由 Rollup 自动确定。可以使用生成的文件来部署项目或进行测试。

6. rollup-watch：监视文件修改并自动重新打包。

rollup -i index.js --file dist.js --watch

rollup -i index.js --file dist.js --watch 命令用于在开发过程中监视并编译 Rollup 构建的代码。其中 -i 表示输入文件为 index.js，--file 表示输出文件为 dist.js，--watch 表示监视输入文件并在发现更改时重新构建输出文件。

举个例子，假设你正在使用 Rollup 构建一个 JavaScript 应用程序，并将所有代码放在 src 目录中。你可以使用以下命令来监视 src/index.js 文件的更改并实时重新构建 dist.js 文件：

rollup -i src/index.js --file dist.js --watch

这个命令会在终端中输出一些信息，告诉你当前的编译状态和构建时间。每当你更新 src/index.js 文件时，Rollup 将自动重新构建 dist.js 文件，并将更改推送到浏览器，以实现实时预览更改。

7. rollup --config：使用配置文件构建项目

rollup --config rollup.config.js

rollup --config rollup.config.js 命令用于指定使用哪个 Rollup 配置文件来构建项目。其中 --config 表示指定配置文件路径，rollup.config.js 是一个常见的 Rollup 配置文件名。

举个例子，假设你正在使用 Rollup 构建一个 JavaScript 应用程序，并将所有代码放在 src 目录中。你可以创建一个名为 rollup.config.js 的文件，指定 Rollup 如何构建你的应用程序：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/app.js',
    format: 'iife'
  }
}

然后，你可以使用以下命令来构建你的应用程序：

rollup --config rollup.config.js

这个命令将 Rollup 配置文件中的选项作为输入，构建你的应用程序，并将生成的 dist/app.js 文件输出到文件系统中。这个命令也可以在 CI/CD 等自动构建系统中使用，以自动构建和部署你的应用程序。

8. 指定环境变量

rollup --config rollup.config.js --environment TEST:ABC

这个命令的作用是运行 Rollup打包工具，并使用 rollup.config.js 配置文件进行配置，同时设置 TEST 环境变量的值为 ABC。其中，TEST 是自定义的环境变量，可以在配置文件中使用 process.env.TEST 进行访问。

举例来说，假设我们正在开发一个Web应用，其中有两个版本：开发版本和生产版本。我们希望在开发版本中启用一些调试选项，而在生产版本中禁用这些选项以提高性能和安全性。为此，我们可以使用Rollup的环境变量功能。

在 package.json 文件中，我们可以添加两个脚本：

{
  "scripts": {
    "build:dev": "rollup --config rollup.config.js --environment TARGET:dev",
    "build:prod": "rollup --config rollup.config.js --environment TARGET:prod"
  }
}

然后在配置文件rollup.config.js 中，我们可以使用 process.env.TARGET 值来决定打包的配置选项。例如：

const isDev = process.env.TARGET === 'dev';

export default {
  input: 'src/index.js',
  output: {
    file: isDev ? 'dist/bundle-dev.js' : 'dist/bundle-prod.js',
    format: 'cjs'
  },
  plugins: [
    // 在开发版本中启用调试选项
    isDev && myDebugPlugin()
  ]
};

在这个例子中，我们可以使用不同的命令来选择不同的目标环境，并在相应的打包结果中启用或禁用调试选项。

四、总结

好啦，以上就是关于rollup的常用命令介绍拉，当然所有可以用命令实现的功能，都可以通过配置文件的方式实现，在项目中还是推荐大家使用配置文件的方式。Rollup是一款优秀的打包工具，它可以帮助我们在项目中更加高效地管理代码。学习Rollup常用命令不仅可以提高我们的工作效率，还可以让我们更加深入地了解前端打包和编译的机制。希望您在使用Rollup时能够更加得心应手，快速高效地完成您的项目

原文链接：https://blog.csdn.net/jieyucx/article/details/131863405

网站首页 编程语言 正文