写在后面
最近新部门的 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 serverapi.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 目录下