【九月打卡】第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 [插件名]

命令行使用插件：

初始化 node 配置文件

npm init -y
安装 rollup 和 rollup 的 JSON 插件

yarn add rollup @rollup/plugin-json

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

// index.js文件

import pkg from “./package.json”;

console.log(“Hello Rollup”, pkg);
rollup 配置文件

// rollup.config.js

export default {

input: “index.js”,

output: {

file: “dist.js”,

format: “umd”,

name: “Index”,

},

};
使用命令

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

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

这就是使用 rollup 的插件步骤

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

图片描述