Vue源码研究

写在前面

最近新部门的 React 项目要做多环境部署，参考了一下之前部门做的 Vue 项目，顺便把 vue-cli-service 的源码看了一下。看源码的时候还去看了下 Vue 源码，感觉挺有意思的，打算好好研究下，这里持续更新本人的心得体会~

vue-cli-service多环境

首先在 package.json 里面 script 下面添加如下内容：

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:staging": "vue-cli-service serve --mode staging",
    "serve:prod": "vue-cli-service serve --mode production",
    "lint": "vue-cli-service lint",
    "format": "vue-cli-service lint --formatter",
    "inspect": "vue-cli-service inspect",
    "build": "vue-cli-service build",
    "build:staging": "vue-cli-service build --mode staging",
    "build:prod": "vue-cli-service build --mode production"
},

vue-cli-service 源码在 node_modules/@vue/cli-service/bin/vue-cli-service.js 目录下

vue-cli-service.js 在第 14 行加载了 ../lib/Service.js 模块，这个模块在 151 行加载了 serve.js 模块

serve.js 在 node_modules/@vue/cli-service/lib/commands/serve.js 目录下

// serve.js 第 50 行
// 检测环境，只在开发环境引入热更新插件
// webpack配置链式语法可以看一下
// configs that only matters for dev server
api.chainWebpack(webpackConfig => {
    if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
        webpackConfig
            .devtool('cheap-module-eval-source-map')

        webpackConfig
            .plugin('hmr')
            .use(require('webpack/lib/HotModuleReplacementPlugin'))

        // https://github.com/webpack/webpack/issues/6642
        // https://github.com/vuejs/vue-cli/issues/3539
        webpackConfig
            .output
            .globalObject(`(typeof self !== 'undefined' ? self : this)`)

        if (!process.env.VUE_CLI_TEST && options.devServer.progress !== false) {
            webpackConfig
                .plugin('progress')
                .use(require('webpack/lib/ProgressPlugin'))
        }
    }
})

$nextTick原理

Vue 核心源码都在 node_modules/vue/src/core 目录下

这个目录下还包括 vdom ，observer ，global-api 的实现，都可以看一下

$nextTick 的源码在 node_modules/vue/src/core/util/next-tick.js 目录下