vue的官方脚手架vue-cli到底做了什么?(vue-cli webpack配置详解)

算起来有好几个月没记录学习的东西了，自己确实变懒了。。。

在这期间
1、看完了 underscore.js 的源码，分析了下公司项目中在vue-cli基础上扩展的一些webpack配置
2、开始了学习react，并利用 react 开始重写自己的新博客项目了，这次要好好做了，技术栈的话就 react react-router redux express就可以了，这次不打算使用 mongoose ，打算写原生的 mongodb 来好好学习语法，现阶段脚手架及周边工具基本配齐了，脚手架是参考 vue-cli 及 create-react-app 以及看着 webpack3 的文档全手动配置的，目录结构有点参考 dva 的教程的意思，正在做 微信授权 支付宝授权的登录
3、在做公司项目的过程中还看了 python 的语法，写了个很简单的上传代码后会自动build及覆盖测试服务器上相应打包文件的脚本，也是懒得自己手动搞这些，原理很简单，就是检测svn的版本号来 build 及 cp 到相应目录即可
4、遇到过一些异步队列的问题，感觉用 promise 解决不够优雅，又详细看了下 js runtime 下的 event loop的详解~发现co包可以解决，但根据源码来看，还是利用 ES6 生成器中的 yeild 和 promise 封装的，相对很优雅的解决方案。

以下为学习中推荐给大家的一些文档

webpack3 文档链接
python 学习链接-廖雪峰
dva 学习链接
event loop –micro task macro task 详解

相信 underscore 与 express、Node 等其他的一些相关链接应该不用我给了吧，大家都可以随便找到~

underscore.js 的话是强烈建议大家去看看的，尤其是它的 中间函数 与 一些断言 来实现函数式编程的思路，Function 那章的 节流函数(.throttle) 及 延时函数(.delay) 建议一定要看，比我之前写的严谨太多，实现方式是真的精巧，以后有空可能会拉出来分析一下。

js 运行环境下的任务队列 event loop 也是绝对需要补的基础， 虽然 co 包和 ES6 的 Generator 都解决了这个问题。

讲解的为vue-cli webpack模板 2017年8月份之前的版本，初始化后如果有不一致，就需要重点注意这个版本问题了，后续修改后会有些许代码不一样

话不多说，进入本次文章正题。

• vue-cli
  
  • build
    
    • build.js
    • check-versions.js
    • dev-client.js
    • dev-server.js
    • utils.js
    • vue-loader.conf.js
    • webpack.base.conf.js
    • webpack.dev.conf.js
    • webpack.prod.conf.js
  • config
    
    • dev.env.js
    • index.js
    • prod.env.js
  • src
  • static
  • .babelrc
  • package.json
  • …

以上是vue-cli初始化项目后的纯净项目目录，大家应该都是这样，注意不是简化版脚手架 webpack-simply,这个就没啥好讲了= =。。。就一个webpack基本配置，没有热加载和 eslint 的。

一、首先我们直接看 package.json 中的脚本命令，从执行处开始倒推vue-cli来讲解主题

// package.json

这里只截取部分需要讲解的地方，大家可以看到初始化项目 install 的vue版本是@2.3.3，截取这个部分是为了让大家看到我是在说新的，不是旧的= =

首先我们看到 npm run start 与 npm run dev 是一样的，都是跑 build/dev-server.js 所以归于一个来讲，所以这里我们其实只需要讲解2个命令
1、npm run dev
2、npm run build

二、npm run dev

1、首先大家打开后，进去看到第一行是 require('./check-versions')() 即加载当前目录下的 check-versions.js 并直接执行此函数，见名思意，其实这里的用处就是检测我们当前的 node 进程中运行的 node 与 npm 的版本，如果不符合会在 cli 下返回相应错误，为此我决定带大家看看里面有哪些包以及是如何做到的，请看下一点；

2、这里我以图片的形式来代替代码块，之后我会在图片下插入注释及所有包的文档地址供大家参考，不然看起来就全是字了，我自己都看不下去
// check-version.js 第一块解释

chalk 包 –正如上传者对包名的简介
“Terminal string styling done right” 终端字符串样式修正，说白了就是在 cli 界面可以显示花里花俏颜色的字
semver 包 –用于取版本后的版本对比
后续有个api satisfies(version, range): Return true if the version satisfies the range
可以字节取版本号的字符串与一个范围作对比， eg: semver.satisfies(1.2.3, >=2.0.0) 这里就返回 false 了，因为不满足
shelljs 包 –可以直接以代码的形式在命令行跑shell,这个不多说了，文档里写的太清楚

exec 函数，开辟一个子进程，执行node子进程 execSync 的方法，它会将传入的命令跑完后，在子进程被结束时返回其结果，这里返回后还转为为了字符串的形式并前后去空格， 转化为字符串时为了方便后续使用我前面说的 semver.satisfies(version, range)

随后建立 versionRequirements 数组里面有2个对象，一个是用来验证 node 的版本一个是 npm semver.clean 获取过滤后的版本号，过滤只有 X.X.X 的形式 shell.which('npm') 获取npm在当前环境下的路径，存在则会返回路径地址，好，下面就可以解释check-versions.js 的下一段exports的函数了