1.rollup的环境配置

第一步:初始化项目 pnpm init

第二步:安装所需要的依赖 pnpm add @babel/preset-env @babel/core rollup rollup-plugin-babel rollup-plugin-serve -D

Babel (@babel/core, @babel/preset-env): 用于将新版本的 JavaScript 代码转换为向后兼容的代码，以便在不同环境中运行。@babel/core 是 Babel 的核心模块，而 @babel/preset-env 则是 Babel 的预设，根据你所指定的目标环境自动确定需要的转换插件。
Rollup (rollup): 一种 JavaScript 模块打包器，类似于 Webpack。Rollup 专注于 JavaScript 的库打包，尤其适用于构建独立的库和工具。
rollup-plugin-babel (rollup-plugin-babel): 这个插件允许 Rollup 使用 Babel 进行转换，可以将 ES6+ 的语法转换为向后兼容的代码，使代码可以在更多的环境中运行。
rollup-plugin-serve (rollup-plugin-serve): 用于在开发过程中启动一个本地的服务器，用于调试和预览项目。

这些工具的结合使用可以帮助你构建、转换和打包 JavaScript 项目，使其在不同环境中运行和部署。

第三步: 创建所需文件

/* 文件夹目录 */

- node_modules  // 所需依赖模块包
- src // 这是存放项目源代码的文件夹
    - index.js // 项目入口文件
- .babelrc //.babelrc 文件是用来配置 Babel 的设置的。Babel 是一个 JavaScript 编译器，主要用于将当前版本的 JavaScript 代码转换为向后兼容的版本，以确保代码能够在更多环境中运行
- index.html // 展示HTML文件
- package.json // 这个文件包含了项目的元数据和依赖信息。它描述了项目的名称、版本、作者、依赖等信息，并包含了运行项目的脚本命令
- rollup.config.mjs //rollup的配置文件  (或rollup.config.js 如果后缀为js需要在package.json中加入"type": "module")

第四步: 编写初始文件代码

/src/index.js:

function Vue() {
  
}

export default Vue;

.babelrc:

{
  "presets": [
    "@babel/preset-env" // Babel预设转译插件 es6语法向后兼容
  ]
}

rollup.config.mjs:

import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';
export default {
  input: "./src/index.js", // 打包的入口文件
  output: {
    file: "./dist/vue.js", // 打包的出口文件
    format: "umd", // 打包的格式 (在window上 Vue) new Vue
    name: "Vue", // 全局变量的名称
    sourceMap: true, //  表示 Rollup 在打包时会生成源映射文件
  },
  plugins: [
    babel({
      exclude:"node_modules/**" // 排除node_modules不需要转换 高级语法 
    }),
    serve({
      port: 9430, // 打开的端口号
      contentBase:"", // 如果是空字符串就是当前目录
      openPage:"/index.html"
    })
  ]
}

package.json:

 /* 
    -c代表运行目录的rollup.config.js 配置文件  
    -w表示检查代码更新 
 */

{
  "name": "vue2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -c -w" 
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.5",
    "@babel/preset-env": "^7.23.5",
    "rollup": "^4.8.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-serve": "^3.0.0"
  }
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/vue.js"></script>
</body>
</html>

pnpm dev 运行项目初步环境就搭建完成了

项目运行完毕之后目录会生成一个dist文件夹下面会有一个vue.js文件是转译之后的文件

1. 搭建实现vue架构环境(rollup的环境配置)

1.rollup的环境配置