根目录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项目中有使用

// 精简版本
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的源码看看

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 和模块格式 + 类型声明

根目录package ​

---scripts--- ​

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

使用场景: ​

原理: ​

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

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

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

Prettier的配置项 ​

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

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

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

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

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" ​

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

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

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" ​

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

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

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

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

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

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

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

---devDependencies 开发环境--- ​

1. conventional-changelog-cli ​

2. esbuild ​

3.eslint ​

4. execa ​

5. fast-glob ​

6. fs-extra ​

7. lint-staged ​

8.minimist ​

9. npm-run-all ​

10. picocolors ​

11. playwright-chromium ​

12. prettier ​

13. prompts ​

14. resolve ​

15. rimraf ​

16. rollup ​

17. semver ​

18. simple-git-hooks ​

19. unbuild ​

20. vue ​

21 vitepress/vitest ​

原数据 ​