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 目錄下