vue npm run build 探索

vue npm run build 探索

vue-cli 是一个很好的工具. 它帮助我们集成了babel和webpack, 以及一些常用的插件.
让我们不用过多的关心配置, 专心业务.

但是, 秉承着一个对技术的好奇.
还是驱使我去看了看vue-cli的代码.

想要知道 npm run build 到底为我们做了什么

前言

文章涉及到一些常用的库, 大家可以先简单了解一下, 再看文章可能会更好理解.

webpack

这里只做一些简单的介绍, 具体可以看官网 .

webpack 是一个现代JavaScript应用的静态打包工具, 当webpack处理应用时,它内部建立了一个映射项目中需要的每一个模块的依赖图.

webpack 通过插件和loader, 来进行打包的处理. 非常的灵活.
但是, webpack的配置是一件极其复杂而笨重的事情.

webpack-chain

webpack-chain是一个可以动态生成的webpack配置的工具
它可以给rules和plugins进行分组具名, 从而更好地管理loader和插件.

vue-cli中也使用了webpack-chain, 用于生成webpack的配置

webpack-merge

webpack-merge用于合并webpack的配置项

const {
    merge } = require('webpack-merge');
// Keys matching to the right take precedence:
const output = merge(
  {
    fruit: "apple", color: "red" },
  {
    fruit: "strawberries" }
);
console.log(output);
// { color: "red", fruit: "strawberries"}

babel

babel 是一个js的编译工具. 具体可以看官网.

webpack 和 babel通过 babel-loader 关联在了一起.
使得在用webpack打包时, 可以编译代码.(例如: 把ES6的语法转成ES5)

vue-cli babel

module.exports = {
   
  transpileDependencies: [
    // can be string or regex
    'my-dep',
    /other-dep/
  ]
}

vue-cli webpack

vue webpack 配置方式

vue-cli 配置webpack可以通过vue.config.js中

1. configureWebpack 简单的配置方式, 合并默认配置
2. chainWebpack 链式操作 (高级)

从命令入手

我们知道打包时, 我们会执行npm run build

这个对应 package.json script 中的

"build": "vue-cli-service build",

npm run 会去找 node_modules 下面的 .bin 目录下 vue-cli-service

我们可以看到一个 vue-cli-service 文件. ( #!/bin/sh 是对应linux系统的脚本解释器)

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
  ret=$?
else 
  node  "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
  ret=$?
fi
exit $ret

代码很少, 意思就是找 node_modules 下面的 @vue/cli-service/bin/vue-cli-service.js

// 省去一些不关键的代码  ...
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const command = args._[0]

service.run(command, args, rawArgv).catch(err => {
   
  error(err)
  process.exit(1)
})

此时, 我们便清晰了. 想要知道怎么打包的,
那我们就要去看看 Service 到底做了什么.

Service

代码的位置
node_modules\@vue\cli-service\lib\Service.js

特别注意: 下面的代码, 我会去掉很多的代码. 但是, 不会影响到我们对整体流程的理解.

我们可以通过以下命令, 来查看vue项目应用的webpack配置(导出到一个 output.js 的文件中)

vue inspect > output.js

初始化service

首先看