环境准备
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"
}
未完待续。。。
网友评论