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