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

发表于 更新于 分类于 阅读次数：

前言

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

构建流程

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {
         "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 脚本。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    /*
     * @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版本构建本地服务

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

观察文件夹

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

1
git:[@github/MicroMatrixOrg/vue3-plan]