手写Vue2源码系列之roolup的环境配置（一）

roolup是什么

Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式，而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由无缝地组合你最喜欢的库中最有用的个别函数。

roolup和其他打包工具的区别

相比于webpack，roolup更加轻量，会尽量保持代码精简于原有状态，但是功能点比较单一，没有webpack多。而最新的Vite就是基于roolup实现的打包构建工具，以后也肯定会逐渐被广泛使用。

rollup.js更专注于Javascript类库打包，所以一般来说，开发应用时用webpack，开发库时用roolup居多。

环境搭建

npm install @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve cross-env -D

新建src文件夹，文件夹底下新建index.js 在根目录底下新建index.html文件

配置config文件

这里具体内容可以看官网：命令行接口 | rollup.js 中文文档 | rollup.js中文网 (rollupjs.com)

首先添加rollup.config.js

import babel from "rollup-plugin-babel";
import serve from "rollup-plugin-serve";
export default {
  input: "./src/index.js",
  output: {
    format: "umd", // 模块化类型
    file: "dist/vue.js",
    name: "Vue", // 打包后的全局变量的名字
    sourcemap: true,
  },
  plugins: [
    babel({
      exclude: "node_modules/**", //排除这个文件夹里的所有文件
    }),
    serve({
      //开启一个服务
      open: true,
      openPage: "/index.html",
      port: 3000,
      contentBase: "",
    }),
  ],
};

添加.babelrc文件

{
    "presets": [
        "@babel/preset-env"  //babel预解析
    ]
}

最后的文件目录结构 最后当我们执行npm run dev时 会帮我把src/index.js文件打包到dist/index.js文件下，且当我们打开浏览器，输入localhost:3000时，roolup会自动帮我们找到根目录下的index.html文件。

综上所述，roolup的环境搭建就配置完成啦。