Vue原理：Rollup搭建Vue环境

这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

使用rollup搭建一个学习Vue2源码学习环境，基于这个环境练习和模拟Vue2的部分核心逻辑

为什么选择Rollup而不是Webpack呢？

Rollup是一个 JS 模块打包器,可以将小块代码编译成大块复杂的代码， rollup.js更专注于Javascript类库打包, 一般开发应用时使用Wwebpack，开发库时使用Rollup

初始目录

创建目录并初始化

mkdir n-vue
cd n-vue
npm init -y

配置Rollup

安装相关npm包

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

• rollup：使用Rollup打包，必须依赖这个插件
• @babel/core：使用babel必须的依赖，核心模块
• @babel/preset-env：需要将代码中的ES6代码转译为ES5，babel提供的一些预设配置，里面包含了很多常用的babel插件
• rollup-plugin-babel：在Rollup中使用babel需要依赖此插件
• rollup-plugin-serve：用于本地起一个静态服务，方便开发、调试
• cross-env：用于环境变量设置，可以帮助开发者设置一些变量

目录结构创建，参考下面目录

|-- n-vue
    |-- .babelrc
    |-- package-lock.json
    |-- package.json
    |-- rollup.config.js
    |-- public
    |   |-- index.html
    |-- src
        |-- index.js

因为使用到babel，需要对其进行简单配置，创建.babelrc文件并配置

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

创建Rollup配置的文件rollup.config.js并对其进行相关配置

import babel from "rollup-plugin-babel";
import serve from "rollup-plugin-serve";

export default {
  input: "./src/index.js", // 入口文件
  output: {
    format: "umd", // 模块化类型，支持 AMD、CMD等
    file: "dist/vue.js", // 打包路径
    name: "Vue", // 打包后的全局变量的名字，可以直接全局使用
    sourcemap: true, // 开启源码调试，方便找到源码地址，便于调试
  },
  plugins: [
    babel({
      // babel配置， 忽略node_modules目录
      exclude: "node_modules/**",
    }),
    process.env.ENV === "development"
      ? serve({
          // 开发环境，本地起一个静态服务
          open: true, // 自动在浏览器打开
          openPage: "/public/index.html", // 入口页面路径
          port: 9527, // 端口号
          contentBase: "", // 静态文件路径， ""代表按照当前目录结构
        })
      : null,
  ],
};

配置执行脚本

{
  "scripts": {
    "build:dev": "rollup -c",
    "serve": "cross-env ENV=development rollup -c -w"
	}
}

环境已经准备就绪，接下来便需要验证环境搭建是否可以使用

简单编写一些测试代码

在src/index.js中编写一个函数并

function Vue(options) {
  console.log(options);
}

export default Vue;

在``public/index.html`引入生成的js代码

<script src="../dist/vue.js"></script>
<script>
  window.onload = () => {
    new Vue({
      name: 'helloWorld'
    })
  }
</script>

打包

命令行运行

npm run build:dev

打包成功，目录结构增加

|-- dist
    |   |-- vue.js
    |   |-- vue.js.map

vue.js内容

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Vue = factory());
})(this, (function () { 'use strict';
  function Vue(options) {
    console.log(options);
  }
  return Vue;
}));

符合配置期望结果

本地运行

命令行运行

npm run serve

此时会自动打开浏览器：http://localhost:9527/public/index.html，控制台会输出一个对象：{name: 'helloWorld'}