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**，放到浏览器上就能看到你的语句了