vue 快速入门 系列 —— vue-cli 上 (6)

如果是 --report，则不会生成 report.html，而会生成 report.json。

vue-cli-service inspect 用法：vue-cli-service inspect [options] [...paths] 选项： --mode 指定环境模式 (默认值：development)

审查一个 Vue CLI 项目的 webpack config。请看示例：

// 提取出webpack开发配置，导出到 webpack.config.development.js 中 demo2> npx vue-cli-service inspect --mode development >> webpack.config.development.js // 提取出webpack生成配置 demo2> npx vue-cli-service inspect --mode production >> webpack.config.production.js

注：接下来我们学习过程中会参考这两个配置文件

查看所有的可用命令

有些 CLI 插件会向 vue-cli-service 注入额外的命令。例如 @vue/cli-plugin-eslint 会注入 vue-cli-service lint 命令。你可以运行以下命令查看所有注入的命令：

demo2> npx vue-cli-service help Usage: vue-cli-service <command> [options] Commands: serve start development server build build for production inspect inspect internal webpack config lint lint and fix source files run vue-cli-service help [command] for usage of a specific command.

也可以这样学习每个命令可用的选项：

npx vue-cli-service help [command] 缓存和并行处理

cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中——如果你遇到了编译方面的问题，记得先删掉缓存目录之后再试试看。

// demo2 中的缓存文件： demo2> dir .\node_modules\.cache\ Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 2021/8/11 11:30 babel-loader d----- 2021/8/11 11:30 eslint-loader d----- 2021/7/19 19:31 terser-webpack-plugin d----- 2021/8/11 11:30 vue-loader

thread-loader 会在多核 CPU 的机器上为 Babel/TypeScript 转译开启。

Tip：虽然 package.json 中没有 cache-loader 和 thread-loader，但 demo2/node_modules 中有。

Git Hook

在安装之后，@vue/cli-service 也会安装 yorkie，它会让你在 package.json 的 gitHooks 字段中方便地指定 Git hook：

{ "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,vue}": [ "vue-cli-service lint", "git add" ] } }

Tip：yorkie，fork 项目 husky，并做了一些改变，比如更改了从 package.json 中读取钩子的位置：

// before { "scripts": { "precommit": "foo" } } // after { "gitHooks": { "pre-commit": "foo" } }

具体用法，请看示例（在demo2基础上进行）：

// package.json { ... "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,vue}": [ "vue-cli-service lint", "git add" ] } }

执行 git commit 命令报错：

demo2> git commit -m \'xx\' On branch master (use "git add <file>..." to include in what will be committed) src/a.js \'lint-staged\' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 pre-commit hook failed (add --no-verify to bypass)

安装依赖包：

// lint-staged - 对暂存的 git 文件运行 linter，不要让不好的代码溜进你的代码库！ demo2> npm i -D lint-staged

接下来给 eslint 增加一个规则，然后在 a.js 中故意不遵守该规则：

// package.json { "eslintConfig": { "rules": { "no-console": "error" } }, } // src/a.js let i = 1 console.log(i);

执行git commit命令，验证不通过，终止提交：

// 需要先 git add demo2> git add src/a.js demo2> git commit -m \'xx\' > running pre-commit hook: lint-staged ⚠ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index. [STARTED] Preparing... [SUCCESS] Preparing... [STARTED] Running tasks... [STARTED] Running tasks for *.{js,vue} [STARTED] vue-cli-service lint [FAILED] vue-cli-service lint [FAILED] [FAILED] vue-cli-service lint [FAILED] [SUCCESS] Running tasks... [STARTED] Applying modifications... [SKIPPED] Skipped because of errors from tasks. [STARTED] Reverting to original state because of errors... [SUCCESS] Reverting to original state because of errors... [STARTED] Cleaning up... [SUCCESS] Cleaning up... ✖ vue-cli-service lint: error: Unexpected console statement (no-console) at src\a.js:2:1: 1 | let i = 1 > 2 | console.log(i); | ^ 3 | 1 error found. pre-commit hook failed (add --no-verify to bypass)

Tip：Git 钩子，和其它版本控制系统一样，Git 能在特定的重要动作发生时触发自定义脚本。有两组这样的钩子：客户端的和服务器端的。客户端钩子由诸如提交和合并这样的操作所调用，而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。你可以随心所欲地运用这些钩子。

// 项目 demo2 的 git hooks demo2> dir .\.git\hooks\ 目录: demo2\.git\hooks Mode LastWriteTime Length Name ---- ------------- ------ ---- -a---- 2021/7/19 9:11 870 applypatch-msg -a---- 2021/7/19 9:07 478 applypatch-msg.sample -a---- 2021/7/19 9:11 854 commit-msg -a---- 2021/7/19 9:07 896 commit-msg.sample -a---- 2021/7/19 9:07 4655 fsmonitor-watchman.sample -a---- 2021/7/19 9:11 874 post-applypatch -a---- 2021/7/19 9:11 866 post-checkout -a---- 2021/7/19 9:11 858 post-commit -a---- 2021/7/19 9:11 854 post-merge -a---- 2021/7/19 9:11 862 post-receive -a---- 2021/7/19 9:11 862 post-rewrite -a---- 2021/7/19 9:11 858 post-update -a---- 2021/7/19 9:07 189 post-update.sample -a---- 2021/7/19 9:11 870 pre-applypatch -a---- 2021/7/19 9:07 424 pre-applypatch.sample -a---- 2021/7/19 9:11 858 pre-auto-gc -a---- 2021/7/19 9:11 854 pre-commit -a---- 2021/7/19 9:07 1643 pre-commit.sample -a---- 2021/7/19 9:07 416 pre-merge-commit.sample -a---- 2021/7/19 9:11 846 pre-push -a---- 2021/7/19 9:07 1348 pre-push.sample -a---- 2021/7/19 9:11 854 pre-rebase -a---- 2021/7/19 9:07 4898 pre-rebase.sample -a---- 2021/7/19 9:11 858 pre-receive -a---- 2021/7/19 9:07 544 pre-receive.sample -a---- 2021/7/19 9:11 913 prepare-commit-msg -a---- 2021/7/19 9:07 1492 prepare-commit-msg.sample -a---- 2021/7/19 9:11 878 push-to-checkout -a---- 2021/7/19 9:11 886 sendemail-validate -a---- 2021/7/19 9:11 838 update -a---- 2021/7/19 9:07 3635 update.sample 配置时无需 Eject