前言学习vue-cli@3.0脚手架源码，希望达到以下目的：了解vue-cli的原理和机制，学习编写命令行工具及相关常用的npm包，了解如何发布npm准备vue-cli在GitHub上fork一个仓库，然后克隆它@vue/babel-preset-app这是所有VueCLI项目中使用的默认Babel预设。（可以简单的认为是一系列babel插件组合）babel.config.jsmodule.exports={presets:['@vue/cli-plugin-babel/preset']}@vue/cli-plugin-babel/这里的preset入口就是包@vue/babel-preset-app。entryindex.js//代码片段module.exports=(context,options={})=>{return{sourceType:"unambiguous",//判断import/export是否出现在文件中，以确定采用的模块化标准overrides:[{exclude:[/@babel[/|\\\\]runtime/,/core-js/],presets,plugins,},{//@babel/runtime中有一些未转译的代码//https://github.com/babel/babel/issues/9903包括：[/@babel[/|\\\\]runtime/]，预设：[[require("@babel/preset-env"),envOptions]],},],};};主要看overrides中的第一个option对象。plugins和presets的执行顺序都是plugins在前，所以先从plugins开始。constplugins=[];plugins.push([require("./polyfillsPlugin"),{polyfills,entryFiles,useAbsolutePath:!!absoluteRuntime},]);//测试环境在这里直接忽略策略if(process.env.VUE_CLI_BABEL_TRANSPILE_MODULES){envOptions.modules="commonjs";if(process.env.VUE_CLI_BABEL_TARGET_NODE){//动态导入在测试中工作所必需的plugins.push(require("babel-plugin-dynamic-import-node"));}}plugins.push(require("@babel/plugin-syntax-dynamic-import"),[require("@babel/plugin-proposal-decorators"),{decoratorsBeforeExport,legacy:decoratorsLegacy!==false,},],[require("@babel/plugin-proposal-class-properties"),{loose}]);plugins.push([require("@babel/plugin-transform-runtime"),{regenerator:useBuiltIns!=="usage",//polyfills由preset-env&polyfillsPlugin注入，所以不需要再添加它们corejs:false,helpers:useBuiltIns==="usage",useESModules:!process.env.VUE_CLI_BABEL_TRANSPILE_MODULES,absoluteRuntime,version,},]);根据babelplugins的执行顺序，第一个是polyfillsPlugin.js。//在遇到的第一个文件中添加polyfillimports.module.exports=({types},{polyfills,entryFiles=[],useAbsolutePath})=>{return{name:'vue-cli-inject-polyfills',visitor:{Program(path,state){if(!entryFiles.includes(state.filename)){return}//导入以倒序注入polyfills.slice().reverse().forEach(p=>{createImport(path,p,useAbsolutePath)})}}}}@vue/cli-overlay自定义覆盖客户端在TODO列表中，尚未实现@vue/cli-plugin-babel@vue/cli-plugin-webpack-4
