美文网首页Vue 3.0
0x0001 vue 3.0 源码环境搭建

0x0001 vue 3.0 源码环境搭建

作者: 张益达达达 | 来源:发表于2019-10-06 11:57 被阅读0次

    环境准备

    git、yarn1.19.0、node10+、npm、vscode

    vscode 插件
    Code Spell Checker -- 用于检查单词拼写
    Prettier -- 用于格式化代码
    Gitlens -- git 的可视化插件

    开发环境搭建

    git clone https://github.com/vuejs/vue-next
    yarn
    

    工程整体介绍

    采用 rollup 作为模块打包工具,
    prettier 作为代码 lint 工具,
    lerna 作为前端 packages 包管理工具,
    采用了 typescript 作为开发语言

    运行开发环境及部分代码解析

    工程根目录下执行 yarn dev ,可在 package.json 中看到运行了 node scripts/dev.js,点击该文件查看,文件主要是通过 execa 插件(子进程管理,调用 shell 和外部程序的 JavaScript 的封装)调用 rollup 进行开发环境工程打包。

    由于未通过设置参数声明打包的目标使用环境,因此 dev.js 文件中的 target 值为 vue,formats 值为 undefined,而 commit 值是获取当前 git rev-parse HEAD 的最新一次的 commit id 的前 7 位字符。因此最终启动子进程 rollup -wc --environment COMMIT:xxxxxxx,TARGET:vue,FORMAT:global,同时将 environment 中的参数设置到 process.env 对应的环境变量上,具体说明请查看 rollup 官方文档https://rollupjs.org/guide/en/#overview

    执行 rollup 子进程时,启动参数中存在 -c ,该参数含义为指定启动配置文件,如果没有指定文件,默认配置文件为 rollup.config.js,因此接下来是解析 rollup.config.js 文件。

    文件最开始定义部分常量,path.resolve 和 path.join 可参考path.join()和path.resolve()的区别

    const packagesDir = path.resolve(__dirname, 'packages')
    const packageDir = path.resolve(packagesDir, process.env.TARGET)
    const name = path.basename(packageDir)
    const resolve = p => path.resolve(packageDir, p)
    const pkg = require(resolve(`package.json`))
    const packageOptions = pkg.buildOptions || {}
    

    接下来通过 rollup-plugin-alias 插件为每个 package 的 index.ts 入口文件设置别名,最终 aliasOptions 对象为

    {
        "resolve": [".ts"],
        "@vue/compiler-core": "/Users/yida/Documents/coding/vue-next/packages/compiler-core/src/index",
        "@vue/compiler-dom": "/Users/yida/Documents/coding/vue-next/packages/compiler-dom/src/index",
        "@vue/reactivity": "/Users/yida/Documents/coding/vue-next/packages/reactivity/src/index",
        "@vue/runtime-core": "/Users/yida/Documents/coding/vue-next/packages/runtime-core/src/index",
        "@vue/runtime-dom": "/Users/yida/Documents/coding/vue-next/packages/runtime-dom/src/index",
        "@vue/runtime-test": "/Users/yida/Documents/coding/vue-next/packages/runtime-test/src/index",
        "@vue/server-renderer": "/Users/yida/Documents/coding/vue-next/packages/server-renderer/src/index",
        "@vue/shared": "/Users/yida/Documents/coding/vue-next/packages/shared/src/index",
        "@vue/template-explorer": "/Users/yida/Documents/coding/vue-next/packages/template-explorer/src/index"
    }
    

    未完待续。。。

    相关文章

      网友评论

        本文标题:0x0001 vue 3.0 源码环境搭建

        本文链接:https://www.haomeiwen.com/subject/yljupctx.html