Vue2源码分析-环境搭建

安装rollup

项目初始化

npm init -y

安装pnpm

npm i -g pnpm

安装rollup以及相关插件

pnpm i rollup @rollup/plugin-babel @babel/core @babel/preset-env --save-dev

在根目录创建rollup.config.js文件，并且配置如下
在这里插入图片描述

import babel from "@rollup/plugin-babel"export default{input:"./src/main.js",  // 入口output:{file:"./dist/vue.js",   // 出口name:"MVue",  // 添加全局对象format:"umd",sourcemap:true // 希望可以调试源代码},plugins:[babel({exclude:'node_modules/**'   // 排除node_modules模块})]
}

在package.json文件下配置命令

"type":"module",
"scripts": {"build":"rollup -cw"
},

根目录下创建src/main.js，并且添加如下代码

export const a=10;

根目录下创建.babelrc文件并且添加如下代码

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

执行打包命令

pnpm run build

成功后我们会看到如下目录

在这里插入图片描述
在dist下创建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>// 引入我们的vue<script src="./vue.js"></script><script>console.log(MVue);</script>
</body>
</html>

用游览器打开index.html如果能看到我们在main.js定义的变量a那么恭喜你，基本的搭建就成功了

在这里插入图片描述