搭建vue3打包环境

vue3的源码可以在github或者码云下载

vue源码目录

  |-- package-lock.json',
  |-- package.json',
  |-- tsconfig.json',
  |-- yarn.lock',
  |-- packages',
      |-- reactivity',
      |   |-- package.json',
      |   |-- src',
      |       |-- index.ts',
      |-- scripts',
      |   |-- build.js',
      |-- shared',
          |-- package.json',
          |-- src',
              |-- index.ts',
              ...

vue3采用monorepo方式进行源代码管理，采用rollup进行打包。
使用monorepo的好处是可以统一管理依赖，方便代码复用。比如我们可以单独使用响应式模块，而不需要引入整个vue3库。

rollup环境

rollup

rollup是一个模块打包器，类似webpack，但是rollup更适合打包库。我们现在常用的一些工具和库，比如vite、vue3、react等都是使用rollup进行打包的。
它可以收集我们代码中细小的模块并将他们打包为一整个模块，以便在浏览器或其它环境中使用。严格来说，rollup只是一个esm的打包器。它与webpack并非 竞争关系，它希望充分利用esm的各种特性，构建出结构扁平，性能高效的各种类库。

vue3中需要使用到的插件

列表如下：

• rollup //rollup核心
• rollup-plugin-dts //生成d.ts文件
• rollup-plugin-esbuild //利用 esbuild 引擎对 JavaScript 文件进行快速转换和优化
• rollup-plugin-node-builtins //用于在打包过程中将 Node.js 核心模块（built-in modules）转换为在浏览器环境下可以使用的代码
• rollup-plugin-node-globals //用于在打包过程中将 Node.js 全局变量转换为在浏览器环境下可以使用的代码
• rollup-plugin-polyfill-node //在浏览器中使用类似 Node.js 的功能
• @rollup/plugin-node-resolve //用于在打包过程中解析 Node.js 模块
• @rollup/plugin-commonjs //将Commonjs模块转换为ESM
• @rollup/plugin-json //用于在打包过程中加载 JSON 文件 并将JSON视为一个模块
• @rollup/plugin-replace //根据配置的规则，将源代码中的指定字符串替换为指定的值
• @rollup/plugin-terser //代码压缩混淆

vue3源码项目中，由于monorepo的缘故，仅能使用yarn进行模块安装，且安装时需要使用 --W命令，以便将依赖安装到根目录下的node_modules中。
例如：

yarn add rollup --W

ts

由于vue3源码是使用ts编写的，所以我们需要安装ts相关的依赖

yarn add typescript
yarn add @types/node

配置文件

使用tsc --init生成默认的ts配置文件、使用yarn init -y生成默认的package.json文件

ok，环境安装到此呢就结束了，如果按照的结构vue源码目录初始化了项目，接下来就可以进行下一步编写构建文件