前言

此系列文章用于记录vue2的简单实现过程,用于检验自己对库创作及vue原理的理解

本系列文章的目的是模仿vue实现一个支持双向绑定的js库，本篇简单介绍开发环境的搭建：rollup打包工具的介绍、配置及使用

rollup

Rollup 是一种打包 JavaScript 模块的工具。它可以将多个 JavaScript 文件打包成一个文件，从而减小文件大小并提高加载速度。Rollup 主要用于将 JavaScript 模块打包成可以在浏览器中运行的代码，但它也可以用于打包其他类型的文件，如 TypeScript 和 CoffeeScript。它使用了 ES2015 模块系统的语法，并且支持常用的模块打包工具，如 Webpack 和 Browserify。

rollup的安装

首先实现使用npm包管理工具初始化一个项目

npm init -y

然后安装rollup，rollup只参与项目的打包工作，因此安装为开发依赖

npm install rollup -D

我准备使用 es6 语法进行库的开发，因此需要安装babel来进行代码的降级获得更好的兼容性

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

其中:

• rollup-plugin-babel 是一个 Rollup 插件，用于将 Babel 与 Rollup 集成在一起。它允许在使用 Rollup 打包模块时使用 Babel 进行代码转换。例如，可以使用 @babel/preset-env 预设选项来转换 JavaScript 代码，以便在旧版浏览器中运行。rollup-plugin-babel 还可以使用其他 Babel 插件，如 @babel/plugin-transform-runtime，来解决 Babel 转换时常见的问题。使用 rollup-plugin-babel 可以更方便地将 Babel 的强大功能与 Rollup 的模块打包能力结合起来，从而提高项目的开发效率。

• @babel/core 是 Babel 的核心模块，它包含了 Babel 的所有基础功能。它提供了一个 JavaScript API，用于将 JavaScript 代码从一个版本转换为另一个版本。@babel/core 与 @babel/preset-env 配合使用可以轻松实现自动转换 JavaScript 代码的目的。@babel/core 还可以与其他 Babel 插件配合使用，比如 @babel/plugin-transform-runtime，来支持更多的语言特性和解决常见的问题。

• @babel/preset-env 是 Babel 中一个预设选项，它可以根据指定的目标浏览器或运行时环境来自动将 JavaScript 代码转换为向后兼容的版本。这个预设包含了所有主要的 ECMAScript 版本和特性，因此可以让开发人员使用最新的 JavaScript 特性，而无需担心它们是否在目标浏览器或运行环境中支持。使用 @babel/preset-env 可以大大简化 Babel 的配置，同时也可以自动选择只包含需要的转换插件，从而减小打包文件的大小。

rollup的配置

官方文档
在项目的根目录下新建一个rollup.config.js用于编写rollup的配置文件，并添加如下配置:

import babel from "rollup-plugin-babel";
export default {
  input: "./src/index.js", //打包入口文件
  output: {
    file: ".dist/vue.js", //打包输出
    name: "Vue", //global.Vue 挂载在全局对象上的名称
    format: "umd", //输出umd模块
    sourcemap: true, //生成sourcemap 希望可以调试源代码
  },
  plugins: [
    babel({
      exclude: "node_modules/**", //排除node_modules所有文件
    }),
  ],
};

测试代码

在项目根目录下新建src/index.js,并编写如下内容:

export default a = 1;

在package.json中生成添加打包脚本:

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -cw"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "rollup": "^2.79.1",
    "rollup-plugin-babel": "^4.4.0"
  }
}

打包源代码

rollup -cw 使用rollup.config.js进行的配置进行打包,并监听文件的变更自动进行dist输出的更新

执行 dev 脚本

npm run dev

rollup v2.79.1
bundles ./src/index.js → .dist/vue.js...
created .dist/vue.js in 467ms

[2022-12-10 12:29:12] waiting for changes...

rollup 帮我们完成了文件的打包并开始监听源代码的变化
dist目录下生成了名为vue.js的文件及对应的map文件

(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';

	var index = a = 1;

	return index;

}));
//# sourceMappingURL=vue.js.map