「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

vue2的实现(1)之搭建rollup打包环境

搭建目录结构

这里我的根文件夹叫做rewrite-vue

npm init --y初始化package.json,
新建rewrite-vue/src目录，用于存放我们的源代码。
新建rewrite-vue/rollup.config.js，里面是rollup的配置文件。
dist目录是我们打包后存放的文件。

安装依赖

npm i rollup @rollup/plugin-babel @babel/core @babel/preset-env @rollup/plugin-node-resolve -D

rollup模块打包工具，相比于webpack更轻量，常应用于第三方类库的打包，webpack更多的应用于工程中。
@rollup/plugin-babel，rollup中使用babel转义语法的插件。
@babel/core，babel的核心包，@rollup/plugin-babel会调用它。
@babel/preset-env，babel插件的集合，@babel/core会使用这些插件，把JS的新语法转义为旧语法，提供更好的兼容性。
@rollup/plugin-node-resolve，当我们导入的时候，只需要写文件夹的名称，就会自动查找文件夹下的index.js。

没有这个插件的话我们就得这样写，import a from b/index.js。有的话这样写import a from b就相当于导入b文件下的index.js了。

配置rollup

1. 配置入口文件input:'./src/index.js'
2. 配置出口output，file:'./dist/vue.js'为打包的文件名， name:'Vue'表示会在全局变量上声明一个Vue变量，来保存我们打包的内容，在浏览中就会有一个window.Vue的变量，format:'umd'代表按照umd的模块化规范打包，sourcemap:true代表开启源代码映射。
3. 配置plugins插件，rollup的插件都是函数粗腰调用，调用的时候可以传递参数。
  - babel插件中配置exclude:'node_modules/**'表示不用转义node_modules文件夹下的所有内容，presets: ['@babel/preset-env']表示babel转义语法的预设是@babel/preset-env
- rewrite-vue/rollup.config.js
```
import {babel} from '@rollup/plugin-babel'
import {nodeResolve} from '@rollup/plugin-node-resolve'

export default {
  input:'./src/index.js',
  output:{
    file:'./dist/vue.js',
    name:'Vue',
    format:'umd',
    sourcemap:true
  },
  plugins:[
    babel({
      exclude:'node_modules/**',
      presets: ['@babel/preset-env']
    }),
    nodeResolve()
  ]
}
```

配置打包命令

在package.json中配置rollup打包的scripts脚本命令rollup -cw，-cw代表着使用默认的配置文件rollup.config.js，监听文件变化重新打包。

rewrite-vue/package.json
```
"scripts": {
  "dev": "rollup -cw"
},
```

测试打包

rewrite-vue/src/index.js入口文件写入以下代码。
```
let obj = {
  name:'Vue'
}
export default obj
```
命令行输入npm run dev

新建rewrite-vue/dist/index.html，引入打包后的文件，输出一下Vue变量。

rewrite-vue/dist/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue2</title>
</head>
<body>
  <script src="./vue.js"></script>
  <script>
    console.log(Vue);
  </script>
</body>
</html>

打包后的目录
打包后的文件rewrite-vue/dist/vue.js，可以看出我们的let已经被babel转义成了var，表示我们的babel配置生效了。
在浏览器打开rewrite-vue/dist/index.html
通过我们上面的测试证明我们的rollup打包环境已经搭建好了，各位客官可以去试试了。

最后

看到这里的同学，动动发财的小手，点个赞吧，希望你2022，身体健康，多挣钱，多学习，多进步。今天是更文第八天加油~

往期精彩

手撕koa，从零掌握koa的实现原理(1)

手撕koa，从零掌握koa的实现原理(2)

手撕koa，从零掌握koa的实现原理(3)

手撕koa，从零掌握koa的实现原理(4)

手撕koa，从零掌握koa的实现原理(5)

手撕koa，从零掌握koa的实现原理(6)

手撕koa，从零掌握koa的实现原理(7)