1.说明
本来想把所有开发依赖安装完，再去复盘脚本命令的。但是这章很有必要。因为前面安装的依赖很多都没有说明怎么用的，而且后面一章开始要使用脚本了。所以把能讲的脚本命令先讲一下吧。
参考链接：
一下脚本直接添加在根目录下的package.json的scripts对象中即可。也可以直接照搬VbenAdmin的。
执行命令以bootstrap为例。如下：
yarn bootstrap
npm run bootstrap
本章完整的脚本代码在最下面。
2.bootstrap
代码：
"bootstrap": "yarn install",
目的：使用yarn安装所有依赖。
3.serve
代码：
"serve": "npx --max_old_space_size=4096 vite",
目的：以开发环境运行项目，并设置node的运行内存为4G。
4.dev
代码：
"dev": "npx --max_old_space_size=4096 vite",
同serve。
5.build
这里先不管。先使用原来创建项目的"build": "vite build"。后面完成了vite配置之后再处理这个脚本。
6.build:no-cache
代码：
"build:no-cache": "yarn clean:cache && npm run build",
目的：清空缓存后构建
7.report
生成打包分析，这里先不管，等后面配置vite再说。
8.preview
代码：
"preview": "npm run build && vite preview",
目的：先打包在进行预览，使用vite访问dist目录。
9.preview:dist
代码：
"preview:dist": "vite preview",
目的：直接预览本地 dist 文件目录。
10.log
这里先不讲，用来生产Git提交记录的。
11.clean:cache
删除缓存，删除node_modules/.cache/和node_modules/.vite下的文件。
由于删除命令依赖还没安装，所以后面再讲。
12.clean:lib
清除依赖，删除node_modules文件夹。
由于删除命令依赖还没安装，所以后面再讲。
13.lint:eslint
代码：
"lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
目的：执行 eslint 校验，该命令会对项目的src、mock目录下的vue、ts、tsx文件进行 eslint 校验，并修复部分问题。
参考链接：eslint命令行说明
14.lint:prettier
代码：
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
目的：执行 prettier 格式化代码。该命令会对项目所有代码 进行 prettier 格式化。谨慎执行。
如果你的vsCode安装了prettier插件。那么prettier插件就会读取根目录下的prettier.config.js文件。当你保存的时候就会进行格式化文件。但是过是别人提交上来的文件，你还去点开它的文件一个一个保存么？所以执行这个命令，可以将src目录下，所有的文件格式化。
参考链接：prettier命令行说明
15.lint:stylelint
代码：
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
目的：校验所有文件的样式格式，并尝试修复。
参考链接：stylelint命令行说明
这里我疑惑的是在VbenAdmin原项目中，提交代码的时候为什么不执行这个脚本。
16.lint:ls-lint
代码：
"lint:ls-lint": "ls-lint",
目的：校验所有文件命名是否正确，但是这个命令好像没气作用呀!!!我也不知道是怎么回事。在VbenAdmin原本的项目上运行也是。
17.lint:lint-staged
后面再说，这个是用来，针对暂存的git文件运行lint操作的。
18.lint:pretty
这个也后面再说，这个是针对暂存的git文件运行prettier操作的。
19.test:gzip
这个后面再说，hhtp-server的npm首页。
20.test:br
这个后面再说。
21.reinstall
重新安装依赖，该命令会先删除 node_modules、yarn.lock、package.lock.json后在进行依赖重新安装，速度会明显变慢。
由于删除命令依赖还没安装，所以后面再讲。
22.install:husky
这个是用来初始化husky的。启用Git挂钩后面再说。
23.gen:icon
生成图标的，后面再说。
24.postinstall
就是执行install:husky脚本的。这里是要，在安装后自动启用Git挂钩，该操作参考：手动初始化husky和Yarn2下怎么自动启动Git钩子函数。具体后面再说。
25.汇总
package.json除脚本、运行依赖、开发依赖外的字段参考官方文档
yarn -v的脚本是后面要说的脚本。
{
// ...
"scripts": {
"bootstrap": "yarn install",
"serve": "npx --max_old_space_size=4096 vite",
"dev": "npx --max_old_space_size=4096 vite",
"build": "vite build",
"build:no-cache": "yarn clean:cache && npm run build",
"report": "yarn -v",
"preview": "npm run build && vite preview",
"preview:dist": "vite preview",
"log": "yarn -v",
"clean:cache": "yarn -v",
"clean:lib": "yarn -v",
"lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:ls-lint": "ls-lint",
"lint:lint-staged": "yarn -v",
"lint:pretty": "yarn -v",
"test:gzip": "yarn -v",
"test:br": "yarn -v",
"reinstall": "yarn -v",
"install:husky": "yarn -v",
"gen:icon": "yarn -v",
"postinstall": "npm run install:husky"
},
// ...
}
上一章
第十六章-安装PostCSS
下一章
第十八章-安装rimraf