第十七章-解析VbenAdmin中的脚本命令

1.说明

本来想把所有开发依赖安装完,再去复盘脚本命令的。但是这章很有必要。因为前面安装的依赖很多都没有说明怎么用的,而且后面一章开始要使用脚本了。所以把能讲的脚本命令先讲一下吧。

参考链接:

一下脚本直接添加在根目录下的package.jsonscripts对象中即可。也可以直接照搬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 校验,该命令会对项目的srcmock目录下的vuetstsx文件进行 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挂钩,该操作参考:手动初始化huskyYarn2下怎么自动启动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

# vben 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×