gitee https://gitee.com/xiaoxfa/source-vue2

Rollup 仿真环境

为啥是 Rollup ，因为这是个 库Lib

准备一个项目，安装依赖，配置 rollup.config.js .babelrc ，初始化项目。

配置不提，简单看下 rollup 编译空function 得到的结果：

  1. (function (global, factory) {
  2.   // 判断 exports 和 module 若满足啧 commonJS
  3.   typeof exports === "object" && typeof module !== "undefined"
  4.     ? (module.exports = factory()) // 继续判断是否有 define 判断 amd
  5.     : typeof define === "function" && define.amd
  6.     ? define(factory) // 再没有视为浏览器里的全局变量，挂 Vue 到全局。
  7.     : ((global =
  8.         typeof globalThis !== "undefined" ? globalThis : global || self),
  9.       (global.Vue = factory()));
  10. })(this, function () {
  11.   "use strict";
  13.   function Vue() {}
  15.   return Vue;
  16. });
  17. //# sourceMappingURL=vue.js.map

具体细节看提交就可以了。

rollup配置一览：

  1. import babel from "rollup-plugin-babel";
  2. import serve from "rollup-plugin-serve";
  3. export default {
  4.   input: "./src/index.js",
  5.   output: {
  6.     format: "umd", // eefe esm cjs umd 模块化类型
  7.     file: "dist/umd/vue.js",
  8.     name: "Vue", // 打包后的全局变量的名字
  9.     sourcemap: true,
  10.   },
  11.   plugins: [
  12.     babel({
  13.       exclude: "node_modules/**",
  14.     }),
  15.     process.env.ENV === "development"
  16.       ? serve({
  17.           open: true,
  18.           openPage: "/public/index.html",
  19.           port: 3000,
  20.           contentBase: "",
  21.         })
  22.       : null,
  23.   ],
  24. };

new Vue 初始化

基于 Prototype 原型来拓展 Vue，具体看代码。