揭秘 vue-cli 脚手架
前言：记得自己大二（2016年）的时候，经过同学的介绍，偶然间接触到了 vue 的项目。那时候的自己对于这一项新兴的技术掌握程度并不好，一来二去折腾了一个星期，也没有弄明白里面的原理（因为当时从来没有接触过这种脚手架，通过webpack，nodejs打包的项目，思维依旧停留在Bootstrap，JQuery等，传统开发的时代，怎么也转不过来），当时就暗暗发誓，将来一定要把 vue 的脚手架弄的明明白白！
现在自己工作了，在工作中自己不断专研，自我感觉良好，就开始试试再次解读一下 vue-cli 脚手架的基础构建代码！
这篇博客可能很长，也许会连载，就有点耐心，沉住气记得看完，哈哈。另外这篇文章也不是一个入门文章，需要有点 Node.js，webpack，ES6 的基础，并且用 vue-cli 做过项目（哪怕是demo），否则可能很多东西会看的一脸懵逼，特别是有关于 webpack 的配置，好运！
废话少说，先做点前期准备开始吧：
- 安装 Node.js，这里给一个Node.js的官网：https://nodejs.org/en/
- 不会的就自己去百度怎么安装啦！
- （非必选）如果想日后方便使用，安装依赖包快一点，切一下淘宝 npm 的镜像，不会的百度：切换淘宝npm镜像 ，就会出来一大堆，自己看！
- 安装webpack，运行：npm install webpack -g，这里有全局安装和局部安装（区别在后面的 -g 参数），建议选全局的；
- 然后通过 vue-cli 的脚手架一步一步的搭建一个vue的项目，直到能跑起来为止。如果你还不会，这里给一个关于搭建vue项目的教程，我就是从这里开始的，传送门：搭建vue项目
完成以上几步，就能拿到一个差不多这样的项目目录结构，我们正餐正式开始！
（还是那句话，要是看到这就开始懵逼的，你可能要先去补补课，以后再来看，哈哈）
第一步：npm run dev
应该大家刚开始的时候也和我一样，根据教程，一步一步走到这里，在命令行工具里面，把这一句命令回车，神奇的时刻就来临了，等一会访问：localhost:8080 就会出现自己网页。这一切仿佛对我们就像是一个黑箱，我们对他背后到底做了什么操作一无所知，心中不免有这样的疑问，它到底在背后做了什么？
让我么来看看
首先，脚手架会到项目的根目录下寻找一个叫：package.json 的文件。
这里要先打一断一下，先明白一些概念。文件里面会有很多东西，主要分为几个部分（很多都是关于Webpack配置的，不懂的就需要先去把 webpack官方文档 看一遍）：
- 基础信息：name, version, description, author, private 这些都是项目的基础信息，分别对应 vue init webpack XXXX 所填写的信息。这些信息了解一下就好，分别代表着，项目名称、版本定义、项目描述、作者和是否四私有项目（一般都是）。
- 脚本部分：scripts，这个就比较重要了。作用主要就是把 webpack 的原生命令代理一下（因为需要配置很多参数，可能会很长，不便于阅读），就像封装函数一样，变得简洁一点，提高可读性，也便于 人 的思维去理解。
脚手架里面配置的scripts是一个对象，下面就来说说里面的内容：
（1）"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
这一句平时应该是用的最多的，因为他是项目的入口。平时你在命令行工具里面输入：npm run dev 其实后台执行的就是就这一句话。当你回车命令后，首先脚手架会到项目的根目录寻找 package.json 里面的scripts的dev，然后执行后面的代码。要是不相信的同学可以自己去验证一下，把dev删除或者给他改一个值，项目估计就不能正常跑起来了。
（2）"start": "npm run dev" 这一句代码其实就执行了上面那句，把上面那句代码再次封装一次。只不过 npm run dev 是npm 包管理工具的命令，yarn start 是yarn 包管理工具的命令。殊途同归，代码不同，实现的功能是一样的，至于你喜欢用哪个都可以，自己开心就好。要是不懂的，自己去百度一下他们的区别哦！（个人感觉到后期的版本两个工具，功能已经非常完善了，也越来越像了，区别不大！）
（3）"lint": "eslint --ext .js,.vue src" 这个代码个人感觉用的不多，至少我没有运行过。百度了一下，主要就是运行这个 npm run lint 来检查代码是否符合 ESlint 的代码风格规范的。如果在项目构建的时候就安装语法检查，编写代码的时候就会实时检查，应该问题也不大。感兴趣的同学可以去研究一下哈！
（4）"build": "node build/build.js" 打包生产的命令。当我们的项目调试通过了，到了生产部署的阶段了，就可以运行 npm run build 来构建生产部署的包。
这里说明一下，现在还不知道这些命令后面做的事和带的参数，没关系，先记着，接下来会一一介绍。
3、项目依赖：dependencies 这里面主要保存很多在 npm run build 时候构建项目的包。这些包的代码会被打包添加到实际的应用代码之中（与之区别的是在开发时的辅助编译作用）。
这里面，可能有人会看过依赖的几种写法：
（1）"vue": "2.5.2", 表示固定版本，只依赖2.5.2版，之后有新版也不会更新
（2）"vue": "~2.5.2", 表示只安装 2.5.X 系列版本的最新版，而 2.6.X 的或其他的不会更新
（3）"vue": "^2.5.2", 表示安装当前库的最新版，这个是脚手架默认的！
是不是看着很懵逼，平时注意一下就好。
4、开发依赖：devDependencies 这个与上面的项目依赖对应，里面内容的形式也是差不多的，唯一的区别是：开发依赖里面的东西不会添加到生产环境中，只是在开发阶段辅助编译开发等功能。比如：autoprefixer，babel-core 等，他只是在编译的时候给CSS样式添加一些浏览器兼容的前缀，和把ES6 转译成ES5。当打包结束时就会被抛弃，并不会添加到打包的结果中。
5、其他：engines、browserslist 最后的不是很重要，但是建议不要修改，除非你知道你在做什么。
engines 主要是规定开发时候的环境的node.js 和 npm 的版本不能太低；
browserslist 一个阈值。表示是否要去兼容某些浏览器，如果小于阈值的部分在ES6的转译时可能将会忽略。（这里我解释的可能不是很清楚）
根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器，而不是一股脑的添加。避免不必要的兼容代码，以提高代码的编译质量。> 根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器，而不是一股脑的添加。避免不必要的兼容代码，以提高代码的编译质量。
以上是别人的说法，感觉说的更透彻，有兴趣的可以看看：browserslist 目标浏览器配置表
然后 终于来到了解析命令阶段，这里被中间的一大段内容打断，和上面的那个首先对应，别睡着了，?
上面说过，通过层层查找，最终执行的命令就是：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
我们来看看命令的具体构成：
（1）服务器部分：webpack-dev-server。webpack 作为打包工具，提供两种用户交互的方式：
- webpack CLI tool：默认的交互方式（已随Webpack本身安装到本地）
- webpack-dev-server：一个Node.js服务器（需要开发者从npm自行安装）
Webpack CLI（有利于生产模式下打包），所以在开发阶段总是会使用后面的方式，以便实现实时编译，监听文件变化，热更新等等功能。
这里面需要了解 webpack-dev-server 的配置（不了解也应该看下），强烈推荐一篇文章，以上内容就是摘自大神文章：[译] Webpack——令人困惑的地方
（2）参数部分。如果你去看了上面的文章，参数的知识多多少少会了解一些。这里还是把看到的几个说一下：
- --inline 热更新实现的方式，此方式会将webpack-dev-server客户端加入到webpack入口文件的配置中。还有一个 --iframe 不推荐的方式，通过iframe 来实现的。可以参考这篇文章：webpack-dev-server介绍及配置
- --progress 是否显示在编译时候的进度条，一般都会有，看着编译的进度，体验好一些。
- --config XXXX.js 通过这个参数指定一个新的配置文件。这里指定了 build/webpack.dev.conf.js
到此。不知不觉间，感觉文章已经这么长了，第一步算作一个完结吧。感觉只是开了一个小头，后面还有大量的内容没有说。所以感觉连载已是不可避免，还有的内容就留到下一期，这里先总结一下写的东西。
总结：读到这里，其实最重要的就是那一行命令背后做的事。如果你已经完全理解了那一行命令的每一个参数，以及背后代表的意义。那说明，你对webpack的理解就算没有很清晰，但是有一个大概的印象了。这对以后遇到的项目还是自己学习，搭建脚手架都有很好的帮助。
其实说句实话，整个脚手架都是围绕着webpack来展开的，很多你一看上去很陌生晦涩的东西多半都是webpack的配置和插件带来的。所以大家还是先去把官方文档看一遍，现在的官方文档已经很好了（吐槽一下以前我学的时候的文档，真难受！）
行吧，这篇初步的文章就写到这里吧！下一篇应该就是真的去解读 /config 和 /build 目录下的文件！
原文链接：https://blog.csdn.net/six_six_six_666/article/details/82633731
