Skip to content
大纲

根目录package

当前阅读版本为:3.1.3

---scripts---

/src/branch/main/package.json

1. "preinstall": "npx only-allow pnpm"

only-allow为pnpm包管理器组织开源限制方案, 当前限制为pnpm

使用场景:

以我当前所在的项目组为例,有四个前端开发工程师。每个人在安装依赖的时候方式不一,我习惯用 cnpm install,别人习惯用 yarn install 或 npm install。这样的场景下,可能存在每个人所处的开发环境的依赖包不同。因此,可以试图用工具去规范团队: only-allow

原理:

only-allow内部使用which-pm-runs来获取当前执行的包管理器后再进行判断拦截,仅需在安装依赖后调整scripts中的内容即可,在vite项目中有使用

js
// 精简版本
const useYarn = () => {
return (
(process.env.npm_execpath && process.env.npm_execpath.includes('yarn')) ||
(process.env.npm_config_user_agent &&
process.env.npm_config_user_agent.includes('yarn'))
)
}

参考文章| 参考文章

npm从5.25.2版开始,增加了 npx 命令

npx想要解决的主要问题,就是调用项目内部安装的模块。比如,项目内部安装了测试工具webpack。

如果我们使用webpack,只能在项目脚本的 package.json 中的scripts字段里面, 如果想在命令行下调用,必须像下面这样。

node-modules/.bin/webpack -v

使用了npx后

npx webpack -v

npx的原理很简单,就是运行的时候,会到node_modules/.bin路径和环境变量$PATH里面,检查命令是否存在。

npx ls // 等同于ls命令

知乎参考

2. "postinstall": "simple-git-hooks"

devDependencies安装了一个依赖 "simple-git-hooks"

一个用于小型开源项目的简单的预提交钩子

一个让你轻松管理 git hooks 的工具

(有空我再深度使用一下这个工具+实战说明)

3. "format": "prettier --write --cache ."

说明:在项目中调用prettier命令行进行格式化

--cache 以下值将用作缓存键 仅当其中一个更改时才会格式化文件。

介绍 prettier devDependencies:一个开发环境需要的依赖包

多人协作的项目开发中,保持统一的代码风格是一件很重要的事

可团队里总有一些不服管的刺头,说什么也不愿意被约束

prettier作为开发依赖记录在package.json里,跟着项目走,版本统一,既可以使用官方的默认配置,也可以指定一套内容的配置项。适合团队协作

Prettier的配置项

文件:.prettierrc

json
{
    "配置项名称": "配置项的值"
}

4. "lint": "eslint --cache ."

eslint:在JavaScript代码中查找并解决问题。

生成缓存,提高eslint加载速度

5. "typecheck": "tsc -p scripts --noEmit && tsc -p playground --noEmit"

  • tsc -p scripts --noEmit

typescript官方的tsc作为编译工具

-p 默认指定调用scripts/tsconfig.json文件

noEmit 不生成输出文件

6. "test": "run-s test-unit test-serve test-build"

run-s 这个命令是npm-run-all依赖提供的

主命令是npm-run-all。我们可以使用npm-run-all命令制作复杂的计划。

run-p用于并行

run-s用于顺序

7. "test-serve": "vitest run -c vitest.config.e2e.ts"

vue 团队 开发的vitest 对标 jest(兼容jest api),截止2022-10-08目前比较新,我目前没有输入了解

8. "test-build": "VITE_TEST_BUILD=1 vitest run -c vitest.config.e2e.ts",

同上

9. "test-build-without-plugin-commonjs": "VITE_TEST_WITHOUT_PLUGIN_COMMONJS=1 pnpm test-build"

看起来像构建commonjs的测试

10. "test-unit": "vitest run"

看起来像是vitest 启动

11. "test-docs": "pnpm run docs-build"

运行文档来自于当前的scripts 下的 docs-build命令,查看第16命令

12. "debug-serve": "VITE_DEBUG_SERVE=1 vitest run -c vitest.config.e2e.ts"

同第七条

13 "debug-build": "VITE_TEST_BUILD=1 VITE_PRESERVE_BUILD_ARTIFACTS=1 vitest run -c vitest.config.e2e.ts"

同第七条

14 "docs": "vitepress dev docs"

运行 dev 下docs文档

当前为缩写 pnpm 命令,查看15条

15 "dev": "pnpm -r --parallel --filter='./packages/*' run dev"

-r :递归 --parallel:并行

--filter: 过滤并且执行指定的包子集(相当于执行你需要运行的模块)

16 "docs-build": "vitepress build docs"

vite说明文档打包,基于vitepress(又基于vite)

17. "docs-serve": "vitepress serve docs"

运行根目录下的docs文档vitepress

18. "build": "pnpm -r --filter='./packages/*' run build"

打包packages下的所有项目

19. "release": "tsx scripts/release.ts"

版本更新脚本

20. "ci-publish": "tsx scripts/publishCI.ts"

触发构建ci

21. "ci-docs": "run-s build docs-build"

触发文档ci

---devDependencies 开发环境---

1. conventional-changelog-cli

CHANGELOG.md 生成工具,用于自动生成记录更改日志,从项目(git)提交的信息和元数据中生成说明 参考文章

2. esbuild

vite 核心之一,一个非常快的js和css 打包和压缩工具,基于 golang

3.eslint

Find and fix problems in your JavaScript code.

在JavaScript代码中查找并解决问题.

eslint-define-config:默认配置

eslint-plugin-import:验证正确导入的规则

eslint-plugin-node:默认配置

4. execa

是nodejs的child_process的改进版本,返回的是一个Promise,pnpm运行命令可以省略run

5. fast-glob

这个包提供了一些方法来遍历文件系统并返回路径名,这些路径名根据 Unix Bash shell 使用的规则与指定模式的定义集匹配,并进行了一些简化,同时以任意顺序返回结果。快速,简单,有效

6. fs-extra

模块是系统fs模块的扩展,提供了更多便利的 API,并继承了fs模块的 API

7. lint-staged

相当于一个文件过滤器,每次提交时只检查本次提交的暂存区的文件,它不能格式化代码和校验文件,需要自己配置一下,如:.eslintrc、.stylelintrc 等,然后在 package.json 中引入。

json
"lint-staged": {
    "*.js": ["eslint --fix", "git add"]
  }

当文件变化,执行 git commit,pre-commit 钩子会启动,执行 lint-staged 命令,我们对于 lint-staged 如上文配置,对本次被 commited 中的所有 .js 文件,执行 eslint --fix 和 git add 命令,前者的的目的是格式化,后者是对格式化之后的代码重新提交。

参考

8.minimist

一个做参数解析的工具包,这个工具可以用来解析process.argv的参数。在vue的cli脚手架里面它主要用来判断用户输入的参数个数。

举个例子,你在使用vue create命令时,官方的要求是create后面只能接一个参数,也就是app的名字,如果你输入过多参数,cli就会把之后多输入的给过滤掉并给出提示,这儿给大家符上vue cli的源码看看

js
if (minimist(process.argv.slice(3))._.length > 1) {
  console.log(chalk.yellow('\n Info: You provided more than one argument. The first one will be used as the app\'s name, the rest are ignored.'))
}

9. npm-run-all

我们可以使用npm-run-all命令制作复杂的计划

参考 script 命令 "test": "run-s test-unit test-serve test-build"

10. picocolors

使用ANSI颜色进行终端输出格式的最小和最快的库。

11. playwright-chromium

Playwright 是一个 Web 测试和自动化的框架,它允许用一个 API 测试 Chromium、 Firefox 和 WebKi

12. prettier

格式化代码风格

13. prompts

终端交互工具:轻量级,美观和用户友好的交互式提示

14. resolve

实现了一个节点 reque.Resol()算法,这样您就可以异步地、同步地代表一个文件来要求.Resol()

15. rimraf

这个是一个删除命令,兼容各种系统,统一操作

16. rollup

核心之一,小而美的工具,打包js,vue框架就是使用他来进行打包的

17. semver

所以由 Gravatars 创办者兼 GitHub 共同创办者 Tom Preston-Werner 就建立了语义化版本控制的规范, semantic version 简称 semver,于是这个规范就叫做 SemVer 规范,规范地址为:semver.org/lang/zh-CN/

18. simple-git-hooks

一个简单的 git hook小项目管理器

github 里面有对比 husky v6

19. unbuild

一个统一的 javascript 构建系统

健壮的基于汇总的捆绑包,支持类型脚本,并生成 Common js 和模块格式 + 类型声明

20. vue

我们熟知的ui框架,不过多介绍了

21 vitepress/vitest

都是vite 的衍生产物


原数据