vue3源码学习-2-实现构建流程

前言

通过源码学习笔记 1 的实验操作，得到了个基础模版。那么接下来，我们需要实现构建流程，让我们的项目能打包运行。

构建流程

此处我们修改一下 tsconfig.json 里面的 strict 为 false，暂时不用严格模式

1. 我修改一下 packages.json 的配置文件,新增一个 dev 的命令

   {
        "name": "vue3-plan",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo \\"Error: no test specified\\" && exit 1",
          "dev": "node scripts/dev.js reactivity -f global"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "esbuild": "^0.14.38",
          "minimist": "^1.2.6",
          "typescript": "^4.6.4"
        }
      }
   

2. 我们新建一个文件夹 scripts 来存放我们打包或者运行时候的启动 JS 脚本,里面新建一个 dev.js,作为启动 js 脚本。

   /*
    * @Author: David
    * @Date: 2022-05-10 11:13:14
    * @LastEditTime: 2022-05-10 13:28:03
    * @LastEditors: David
    * @Description: 打包运行的脚本
    * @FilePath: /vue3-plan/scripts/dev.js
    * 可以输入预定的版权声明、个性签名、空行等
    */
   // 这里用到了之前安装的minimist以及esbuild模块
   const args = require("minimist")(process.argv.slice(2)); // node scripts/dev.js reactivity -f global
   const { build } = require("esbuild");
   // console.log(args)
   const { resolve } = require("path"); // node 内置模块
   
   const target = args._[0] || "reactivity";
   const format = args.f || "global"; // 打包的格式
   
   const pkg = require(resolve(
     __dirname,
     `../packages/${target}/package.json`
   ));
   
   // iife 立即执行函数 (function(){})();
   // cjs node中的模块 module.exports
   // esm 浏览器中的esModule模块 import
   const outputFormat = format.startsWith("global")
     ? "iife"
     : format == "cjs"
     ? "cjs"
     : "esm";
   
   //打包之后文件存放地方
   const outFile = resolve(
     __dirname,
     `../packages/${target}/dist/${target}.${format}.js`
   );
   
   //esbuild
   //天生就支持ts
   build({
     entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
     outfile: outFile, //输出的文件
     bundle: true, //把所有包全部打包到一起
     sourcemap: true,
     format: outputFormat, //输出格式
     globalName: pkg.buildOptions?.name, //打包全局名，上次在package.json中自定义的名字
     platform: format === "cjs" ? "node" : "browser", //项目运行的平台
     watch: {
       //监听文件变化
       onRebuild(error) {
         if (!error) {
           console.log("rebuild~~~");
         }
       },
     },
   }).then(() => {
     console.log(`watch~~~~`);
   });
   

   经过上面 2 个步骤的操作，我们完成了项目的构建过程，在终端运行如下命令

   这里我的 esbuild 版本是 0.14.38，而超过 0.17 的版本 watch 就是不是这么写了我的一篇文章 esbuild v19版本构建本地服务

   ## 就会执行定义在package.json的dev命令，然后执行scripts/dev.js中的脚本
      npm run dev
   

观察文件夹

运行上面的命令后会发现**reactivity文件夹下多了个 dist/reactivity.global.js和 reactivity.global.js.map,这个就是打包之后的文件，新建一个 html文件，引入 reactivity.global.js**，放到浏览器上就能看到你的语句了