Vue3源码学习三（编译器）

Vue3源码学习二（运行时）

Vue2源码学习

本文介绍`Rollup`的一些配置及常见插件，最后使用`Rollup`实现一个类库和`Vue3`的UI组件库。



[中文官网](https://www.rollupjs.com/) 
`Rollup`是一个`JavaScript`的模块化打包工具，通常用它来打包类库

# Rollup与Webpack异同

- `Rollup`主要针对`ES Module`进行打包的；
- 另外`Webpack`通常通过各种`loader`处理各种各样的文件以及他们的依赖关系；`Rollup`更多时候是专注于处理`JS`代码（当然也可以处理`css`、`font`、`vue`等文件）
- `Rollup`的配置和理念相对于`webpack`来说，更加的简洁和容易理解；
- 在早期`webpack`不支持`TreeShaking`时， `rollup`具备更强的优势；
- 在实际项目开发中我们通常使用`webpack` ；而对类库文件进行打包时我们通常使用`rollup`

相同点

- `rollup` 支持代码分割（分包）
- 支持多入口打包
- 导出格式（`esm`、`amd`、`cjs`、`iife`、`umd`）


```javascript
// ./src/index.js
// 动态导入的模块会自动分包
import('./logger').then(({ log }) => {
 log('code splitting~')
})
```


# 配置文件

`npm i -D rollup`

- 与`webpack`、`babel`不同，`rollup`的`core`和`cli`在同一个包中

- 配置文件 `rollup.config.js`

- `npx rollup --config rollup.config.js` # 使用默认配置文件


支持所有输出格式
```javascript
// ./rollup.config.js
// 所有 Rollup 支持的格式
const formats = ['es', 'amd', 'cjs', 'iife', 'umd', 'system']
export default formats.map(format => ({
 input: 'src/index.js',
 output: {
 file: `dist/bundle.${format}.js`,
 format
 }
}))

// 方式二
export default {
 input: 'src/index.js',
 output: [...]
}
```
关于`rollup` [这里有一个极简上手demo](https://github.com/zce/rollup-demo)

# 常见插件
`Rollup`自身的功能就只是`ES Modules`模块的合并，如果有更高级的要求，例如加载其他类型的资源文件或者支持导入 `CommonJS` 模块，又或是编译 `ES 新特性`，这些额外的需求`Rollup` 同样支持使用插件去扩展实现。

- `@rollup/plugin-node-resolve`&emsp;加载`NPM`模块
- `@rollup/plugin-commonjs`&emsp;&emsp;&emsp;加载 `CommonJS` 模块
 - 如果打包`umd` 出现了`require`语句，可能是你没有引用该包
- `@rollup/plugin-json`&emsp;&emsp;&emsp;&emsp;&emsp;加载`JSON`模块
- `@rollup/plugin-terser`&emsp;&emsp;&emsp; &emsp;代码压缩
- `rollup-plugin-postcss`&emsp;&emsp;&emsp;&emsp; 处理`css`文件
 - 默认会读取`postcss.config.js`文件，这个文件又会根据`browserslist`给样式打补丁
 - `postcss.config.js` 种可以配置`cssnano` 压缩 `css` 还可以配置 `postcss-preset-env`
 - 它还默认支持了`scss` 和 `less` 有了它你可以忘掉 `rollup-plugin-scss`和`rollup-plugin-less` 了
- `rollup-plugin-vue2` `vue-template-compiler`
 - 处理`vue2`文件
- `rollup-plugin-vue`	`@vue/compile-sfc`
 - 处理`vue3`文件
 - 对于`sfc文件`要配合 `rollup-plugin-styles` 或 `rollup-plugin-postcss`
- `rollup-plugin-peer-deps-external`&emsp;处理对等依赖
- `rollup-plugin-styles`&emsp;&emsp;&emsp;&emsp;&emsp;处理样式，独立出来或者插入 html某个节点中
- `rollup-plugin-replace`&emsp;&emsp;&emsp;&emsp; 代码动态替换（如 `process.env.NODE_ENV`）
 - 相当于`webpack.DefinePlugin` 

# rollup集成babel
我们通常使用`babel`将`es6+`代码转换成`es5`以便能在低版本的浏览器上运行。关于`babel`如果你还不太了解，可以看我的另一篇文章 [《babel深入浅出》](https://blog.warmplace.cn/post/babel)。 

`@rollup/plugin-babel` 用于`rollup`和`babel`之间的无缝集成

> 为什要使用`@rollup/plugin-babel`？ 
> 我们先讨论下不使用翻译`es6+`代码的两种方案
> 1. 首先通过`Babel`运行代码，注意排除模块转换器
> 2. 或者通过`Rollup`运行代码，然后再用`babel`处理代码
> 
以上两种方式都有缺点
> - 第一种情况除了配置项复杂外，你最终会在整个代码中重复注入`polyfill`（比如使用了`Object.hasOwn`方法的每个文件都会引入一次`polyfill`）
> - 第二种情况转译会更慢，因为对于`Babel`来说转译一个大文件对与转译几个小文件来说需要更多的时间和空间开销
> - 无论哪种方式，您都必须担心放置中间文件的位置，并且让 `sourcemaps`表现得非常痛苦
> 
使用`@rollup/plugin-babel`会使整个过程更加容易

```javascript
// 1. package.json 配置script脚本
// "build": "rimraf lib/* && rollup -c"

// 2. rollup.config.js
const {babel} = require('@rollup/plugin-babel');
const nodeResolve = require('@rollup/plugin-node-resolve');
const commonjs = require("@rollup/plugin-commonjs");
const path = require('path');

const resolve = function(...args) {
 return path.resolve(__dirname, ...args);
};

export default [
 {
 input: resolve('./src/index.js'),
 output: {
 file: resolve("lib/bundle.umd.js"),
 format: 'umd',
 name: '$mylib',
 },
 plugins: [
 nodeResolve.default({
 browser: true,
 }),
 commonjs(),
 babel({
 babelHelpers: 'runtime',
 exclude: 'node_modules/**',
 }),
 ],
 }
];

// 3. babel.config.js
module.exports = {
 "presets": [
 ["@babel/preset-env", {
 "modules": false,
 }],
 ],
 plugins: [
 [
 '@babel/plugin-transform-runtime',
 {
 corejs: {
 version: 3,
 proposals: true, // 支持预设
 },
 useESModules: true,
 }
 ],
 ]
}

// 4. package.json配置browserslist
// "browserslist": [
// "Android >= 6",
// "ios >= 11",
// ">0.5%"
// ],
```

# 如何编译TS
`rollup`编译`TS`有两个方案

1. 使用插件`rollup-plugin-typescript`
2. 使用`babel`编译`TS`

在研究这两个方案前，我们先了解一下背景

- 除了`babel`可以将`es6`转换成`es5`外，`typescript`也有这个能力
- 相比`babel`而言，`typescript`转`es5`灵活性差很多，为不支持插件能力，还有一个硬伤是不支持为es6API提供垫片。更多差异可以看我的另一篇文章[《babel如何编译TS》](https://blog.warmplace.cn/post/babel#Babel%E7%BC%96%E8%AF%91TypeScript)

通过实测发现`rollup-plugin-typescript`配置该插件虽然能正常打包，但是打包的过程`babe.config.js` `.browserslist`配置无效， 使用 `@babel/preset-typescript`无法生成声明文件，解决方案是 使用 `npx tsc`命令 单独生成声明文件 `npx tsc --declaration -p ./ -t esnext --emitDeclarationOnly --outDir types`

有了上面的基础我们来实现一个类库吧

# 实现一个类库
中文官网给处理 `Rollup` 构建应用及类库的示例，但是配置太过于简单。 
笔者尝试升级了一下类库的配置，支持 `babel` 和 `ts`

JS版类库 [https://github.com/guojingwen/frondend-project/tree/main/rollup_js_lib](https://github.com/guojingwen/frondend-project/tree/main/rollup_js_lib)

- [x] 支持es6 句法
- [x] 支持es6 API
- [x] 支持`cmd`、`umd`、`amd`、`esm`
- [x] 支持`browserslist`

TS版类库 [https://github.com/guojingwen/frondend-project/tree/main/rollup_ts_lib](https://github.com/guojingwen/frondend-project/tree/main/rollup_ts_lib)

- [x] 支持前面`JS`版本所有功能
- [x] 支持`TS` & 自动生成声明文件
- [x] 支持排除依赖包构建

打包一个Vue3 UI库 [https://github.com/guojingwen/frondend-project/tree/main/rollup_ts_vue3_ui_lib](https://github.com/guojingwen/frondend-project/tree/main/rollup_ts_vue3_ui_lib)

- [x] 支持es6 句法
- [x] 支持es6 API
- [x] 支持TS & 自动生成声明文件
- [x] 支持`cmd` `umd` `amd``esm`
- [x] 排除对等依赖构建（vue3 element-plus）
- [x] 支持 `postcss` `postcss-preset-env` `cssnano` `scss`

Rollup学习笔记

本文简单介绍gulp概念及基本使用



## Gulp是什么？
- [官网](https://www.gulpjs.com.cn/)
- `gulp`是一个**基于流的自动化构建工具**
- 它是一个工具包，可以帮你自动化和增加你的工作流

## Grunt vs Gulp
- `grunt`运用配置的思想来写打包脚本一切皆配置，配置项比较多且不同的插件会有扩展字段，认知成本高；更像一个工具库，为你提供各种螺丝刀，采用流式写法来编写构建脚本
- `grunt`默认采用串行的方式执行任务，想要并行则以大任务包含小任务， 一种树形结构）的方式运行，不灵活；`gulp`并行串行课随便组装
- `gulp` 流的形式 是将文件写入内存，而`grunt`是写入临时文件，所以`gulp`构建项目比`grunt`快

先有的`grunt`再有的`gulp`，`gulp`一诞生就迅速取代了`grunt`


## Gulp vs Webpack
`gulp`的核心理念是`task runner`

- 可以定义自己的**一系列任务**，等待任务被执行；
- 基于**文件Stream**的构建流；
- 我们可以使用**Gulp的插件体系**来完成某些任务

webpack的核心理念是`module bundler`

- webpack 是一个**模块化打包工具**
- 可以使用各种各样的**loader来加载不同的模块**
- 可以使用各种各样的插件在**webpack打包的生命周期**完成其他的任务；

`gulp`相对与`webpack`的优缺点：

- `gulp`相对`webpack`思想更加的**简单、易用**，更适合编写一些自动化的任务
- 但是大型项目一般不会使用`gulp`来构建，`gulp`默认也是不支持模块化的


## 创建Gulp任务
每个`Gulp`任务都是一个异步的`JavaScript`函数：

- 此函数可以接受一个`callback`作为参数，调用`callback`函数表示任务结束
- 或者是返回一个`steam`、`promise`、`event emmitter`、`child process` 或者`observer`类型的函数

任务可以是`public`或者`private`类型的

- 公开任务 从`gulpfile.js`中被导出，可以通过`npx gulp [command]`命令直接调用；
- 私有任务 被设计为内部使用，通常作为`series()`或`parallel()`组合的组成部分；
```javascript
// 定义任务 `npx gulp foo`
module.exports.foo = (cb) => {
 console.log("foo");
 cb();
}

// 默认任务 `npx gulp`
module.exports.default = (cb) => {
 console.log("default task");
 cb();
}

// gulp4之前, 定义任务的方式 `npx gulp bar`
const gulp = require('gulp');
gulp.task("bar", (cb) => {
 console.log("bar");
 cb();
})

// 私有任务
const abc = (cb) => {
 cb();
}

module.exports.def = () => console.log('不是任务');
// npx gulp def
// [20:47:04] The following tasks did not complete: def
// [20:47:04] Did you forget to signal async completion?
```


## 任务组合series和parallel

- `series()`	串行任务组合
- `parallel()`	并行任务组合

他们可以接受任意数量的任务函数或者已经组合的操作
```javascript
const { series, parallel } = require('gulp');

const task1 = (cb) => {
 setTimeout(() => {
 console.log("task1");
 cb();
 }, 2000);
}

const task2 = (cb) => {
 setTimeout(() => {
 console.log("task2");
 cb();
 }, 3000);
}

const seriesTask = series(task1, task2);
const parallelTask = parallel(task1, task2);

const composeTask = series(parallelTask, seriesTask);

module.exports = {
 seriesTask,
 parallelTask,
 composeTask
}
// 1. npx gulp seriesTask 
// Finished 'seriesTask' after 5.01 s

// 2. npx gulp parallelTask
// Finished 'parallelTask' after 3 s

// 3. npx gulp composeTask
// 串行 parallelTask 和 parallelTask 3+5 = 8

```


## 读写文件&转换
`gulp`暴露了`src()`和`dist()`方法处理计算机上存放的文件

- `src()`&emsp;&emsp;接受参数从文件系统中读取文件然后生成一个`Node`流，**它将所有匹配的文件读到内存中并通过流进行处理**
 - 由 `src` 产生的流应从任务中返回并发出异步完成的信号；
- `dest()`&emsp;&emsp;接受一个输出目录作为参数，并且他还会产生一个`Node`流，通过该流将内容输出到文件中

流所提供的主要`API`是 `.pipe()`方法 其原理是什么呢？

- `pipe` 方法接受一个**转换流**或**可写流**
- 那么转换流或者可写流，拿到数据后可以对数据进行处理，再次传递给下一个转换流或者可写流；

`pipe`方法可以做哪里事情？

- 如果希望将`es6`转换成`es5`，可以使用`babel`插件
- 如果希望对代码进行压缩和丑化，可以使用`uglify`或者`terser`插件

`glob`文件匹配

- `src` 方法接受一个`glob`字符串或有多个`glob`字符串组成的数组作为参数，用于确定哪些文件要被执行
- `glob` 的匹配规则 可以看我的另一篇文章 [glob模式匹配](https://www.yuque.com/guojw/fe-project/rg6nsk#hAwkw)
 - `*.js` 匹配当前目录下任意`js`文件
 - `script/**/*.js`	`script`目录下的任意目录下的任意`js`文件
 - `['script/**/*.js', '!script/vender']`排除`script/vender`目录后，`script`目录下的任意目录下的任意js文件
```javascript
const gulp = require('gulp');
const babel = require("gulp-babel");

const jsTask = async () => {
 return gulp.src('./src/**/*.js')
 .pipe(babel())
 // .pipe(terser({mangle: {toplevel: true }}))
 .pipe(gulp.dest("./dist"))
}
module.exports = {
 jsTask
}
```


## gulp案例
详细案例[点击这里](https://git.warmplace.cn:10443/guojw/frontend-project/tree/master/gulp_example)
```javascript
const { src, dest, watch, series, parallel } = require('gulp');

const htmlMin = require('gulp-htmlmin');
const babel = require('gulp-babel');
const terser = require('gulp-terser');
const less = require('gulp-less'); // less
const postcss = require('gulp-postcss'); // postcss
const postcssPresetEnv = require('postcss-preset-env');
const inject = require('gulp-inject');

const browserSync = require('browser-sync');

const del = require('del');

const htmlTask = () => {
 return src("./src/*.html", {base: "./src"})
 .pipe(htmlMin({
 collapseWhitespace: true
 }))
 .pipe(dest("./dist"))
}

const jsTask = () => {
 return src("./src/js/**.js", {base: "./src"})
 .pipe(babel({presets: ["@babel/preset-env"]}))
 .pipe(terser({mangle: {toplevel: true}}))
 .pipe(dest("./dist"))
}

const lessTask = () => {
 return src("./src/css/*.less", {base: "./src"})
 .pipe(less())
 .pipe(postcss([postcssPresetEnv()]))
 .pipe(dest("./dist"))
}

/**
 * 配合 
 *  
 *  
 * 使用
 */
const injectHtml = () => {
 return src("./dist/*.html")
 .pipe(inject(src(["./dist/js/*.js", "./dist/css/*.css"]), {relative: true}))
 .pipe(dest('./dist'))
}

// 搭建本地服务器
const bs = browserSync.create();
const serve = () => {
 watch("./src/*.html", series(htmlTask, injectHtml));
 watch("./src/js/*.js", series(jsTask, injectHtml));
 watch("./src/css/*.less", series(jsTask, lessTask));

 bs.init({
 port: 8080,
 open: true,
 files: "./dist/*",
 server: {
 baseDir: "./dist"
 }
 })
}

const clean = () => {
 return del(["dist"])
}

const buildTask = series(clean, parallel(htmlTask, jsTask, lessTask), injectHtml);
const serveTask = series(buildTask, serve);

module.exports = {
 htmlTask,
 serveTask,
 buildTask
}
```