vue-cli脚手架源码解析(四)

最近时间充裕，手写了下vue-router和双向绑定，现在借着上一篇的内容。

vue-cli-service

---

当脚手架帮我们创建好文件的基本结构后，接下来就是vue-cli-service命令了。

1. vue-cli-service serve // 本地服务 webpack-dev-server
2. vue-cli-service build // 打包构建
3. vue-cli-service lint // 语法检查

归根而言就是一个命令，三个参数，不多废话，正式开始。

这个vue-cli-service.js只是解析下参数。

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
service.run(command, args, rawArgv).catch(err => {})

Service.run

async run (name, args = {}, rawArgv = []) {
    // mode就是production, development,test之类的。
    const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])
    
    this.init(mode)
    
    // name 为 build, serve, lint
    // fn就是执行对应的命令

    let command = this.commands[name]

    const { fn } = command
    return fn(args, rawArgv)
  }

run里面调用了 this.init(mode),init里面会去获取用户的配置文件，即vue.config.js，或者package.json里面的vue字段。具体代码就不贴了，很简单。
init里面同样会去注册commands里的命令,里面其实绕来绕去，但最后调用的是commands目录下的各个命令文件。

vue-cli-service serve

---

这章重点讲下serve这个命令,但其实就是一个webpack-dev-server的配置，不过脚手架走的是api调用。

直接找到 new WebpackDevServer。 第一个参数compiler，这个是webpack参数，第二个参数webpack-dev-server参数.这个可以看官方文档，webpack参数和build命令一起讲

webpack-dev-server的配置就不多讲了，详细可以看文档。

vue-cli-service inspect

---

这个命令就不多讲，只讲下当我们inspect后，能够输出一份配置文件，也就是vue脚手架所用的webpakc配置文件。

接下来我们一个字段一个字段来详解一下这份配置文件。我没有做任何额外的配置，都是脚手架默认配置。

1. entry 这个就简单了,入口文件就一个main.js, 自己写的时候也可以把垫片库写进去，如@babel/pollify
2. mode, context,devtool

3. output

4. resolve

5. module，这个配置比较繁琐，有很多重复配置，如支持.scss,sass,less,css，其实都是差不多，我会选择性省略

   静态资源，如jpg图片，svg,mp4媒体文件等，字体文件，都的都是url-loader和file-loader。
   url-loader，可以把小文件转成base64，减少http请求
   file-loader，解析资源路径，并拷贝到输出目录

   css只讲scss配置，vue-cli支持css模块化，所以scss写了两种配置。

   普通的scss配置

   很简单配置，可以理解为先sass-loader识别解析sass,postcss-loader加前缀，支持新语法，css-loader解析成css，因为是production环境，所以用了min-css-extract-loader，提取成独立的css文件，如果是开发环境就是style-loader，直接插入到页面中，方便调试

   css模块化

   配置上就是css-loader有差别，因为上家公司开发react，一直用的是css模块化，这家公司用的是scope,个人感觉css模块化开发虽然写法上繁琐了些，但是打包出来的css是真正做到隔离了，css名字是一个hash值，而scope会导致html有多余属性。
   css模块化写法，会把所有的样式都当初一个对象的属性，如 style.title，那么在模板里面就要写成class="style.title"的格式