【九月打卡】第18天 vite从入门到精通 4-3章

课程名称： Vite 从入门到精通，玩转新时代前端构建法则

课程章节： 4-3 Rollup 的命令行使用

课程讲师： Jokcy

课程内容：

基本命令行使用
常用的命令

帮助文档

rollup --help
或
rollup -h

查看版本

rollup --version
或
rollup -v

输入文件

rollup --input [文件名]
或
rollup -i [文件名]

注意命令可以执行多次,如下：

// 输入 index.js 和 a.js 文件，输出到 dist 目录,输出的文件格式为 cjs
// 这里不能使用 --file 命令，因为 --file 只是指定一个输入文件
// 而这里有两个输入的文件
rollup -i index.js -i a.js --dir dist --format cjs

输出文件

rollup --file [文件名]

输出的文件格式（类型）

rollup --format [类型]
或
rollup -f [类型]

format 的格式有如下几种：

• iife

  输出的是自调用的函数

• cjs

  编译为 common.js 格式也就是 require 形式代码

• es

  编译为 ES Module 格式，通过 import 和 export 关键字引入 导出，也是当前流行的

• umd

  把 cjs（common.js）、amd、iife 这几种规范放到一起都去兼容的一中格式

  注意使用 umd 格式需要在 加上 --name [名称] 命令

用于 UMD 导出的名称

rollup --name [名称]

输出指定目录

rollup --dir [目录名]

监听文件变化

rollup --watch

执行后 命令行 会停留在 waiting for changes... ，这个时候修改文件后保存，就会自动编译

如：

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

rollup使用config文件

创建 rollup.config.js 文件，文件默认是需要 使用 ES Module 来导出也就是 export default {}。

如果想使用 common.js 规范，需要修改 rollup.config.js 文件后缀为 .cjs也就是rollup.config.cjs,这样导出就是 module.exports = {}。

推荐使用 ES Module 规范。

rollup.config.js 文件中的配置项，是和 命令行配置 一一对应的

例子如下：

// rollup.config.js 文件
export default {
  input: "index.js",	// --input [文件名] 输入文件命令
  output: {		// output：输出
    file: "dist.js",	// --file [文件名] 输出指定文件命令
    format: "umd",
    name: "Index"
  },
};

通过 --config [配置文件名] 命令行 执行 配置文件

执行 rollup 配置文件

rollup --config [配置文件名]
如：
rollup --config rollup.config.js

环境变量

rollup --environment [环境名]:[环境中变量]

在编译的过程中传递环境变量，可以时我们更好的区分环境。

如果有配置环境变量就可以在文件中使用 process.env.[环境名]来获取变量，如：

// rollup,config.js
console.log("环境=>", process.env.MODE);

let mode = process.env.MODE;
// 判断环境是不是 local
const isLocal = mode === "local";

export default {
  input: "index.js",
  output: {
    file: "dist.js",
    format: isLocal ? "es" : "umd",	// 环境是 local 编译格式为 es
    name: "Index",
  },
};

// 执行命令
rollup --config rollup.config.js --environment MODE:local

// 控制台结果
环境=>local

声明插件

rollup --plugin [插件名]

命令行使用插件：

1. 初始化 node 配置文件

   npm init -y

2. 安装 rollup 和 rollup 的 JSON 插件

   yarn add rollup @rollup/plugin-json

   @rollup/plugin-json 插件是把引入 json 格式的文件，转为 JavaScrip 的代码

3. 文件中引入 JSON文件

   // index.js文件

   import pkg from “./package.json”;

   console.log(“Hello Rollup”, pkg);

4. rollup 配置文件

   // rollup.config.js

   export default {

   input: “index.js”,

   output: {

   file: “dist.js”,

   format: “umd”,

   name: “Index”,

   },

   };

5. 使用命令

   npx rollup --config .\rollup.config.js --plugin json

   编译出来的文件就会把 JSON 的文件转为 js 的代码

这就是使用 rollup 的插件步骤

课程收获：
对 rollup 的命令有一定的了解