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"的格式