pnpm 和 npm

[mark9804]

pnpm 主要是不会下载重复的包，我们项目优势不是很明显 (410MB 对比 430MB)，我自己一个 web 工程能节省一半体积

package.json

{
  "name": "v2.development.hiroshima-u.ac.jp",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "node ./CI+CD/convertYaml.js; vite build",
    "preview": "node ./CI+CD/convertYaml.js; vite build; vite preview --host",
    "check": "npx eslint --config ./.eslintrc.json ./src/ --ext .js,.vue",
    "format": "npx prettier --config ./.prettierrc.json -uw ./src/ ./public/configs/*.yml"
  },
  "eslintIgnore": [
    "stats.html"
  ],
  "dependencies": {
    "js-yaml": "^4.1.0",
    "vue": "^3.2.40"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
    "@vitejs/plugin-legacy": "^2.2.0",
    "@vitejs/plugin-vue": "^3.1.2",
    "eslint": "^8.25.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-sort-exports": "^0.7.0",
    "eslint-plugin-vue": "^9.6.0",
    "postcss": "^8.4.17",
    "prettier": "^2.7.1",
    "prettier-plugin-css-order": "^1.3.0",
    "rollup-plugin-visualizer": "^5.8.2",
    "terser": "^5.15.1",
    "vite": "^3.1.7",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-imp": "^2.3.0",
    "vite-plugin-pwa": "^0.13.1",
    "vite-plugin-top-level-await": "^1.1.1"
  }
}

[BTMuli]

pnpm 跟 npm 都是包管理工具，后者 node 下载的时候一并包括了，配置量为0，前者还要 npm i pnpm 一下。

考虑下载包大小的话，既然 pnpm 跟 npm 不太明显，有对比 Yarn 吗（

pnpm 相比 npm 确实在一些包的结构管理上比较清晰，不过个人认为项目用 npm 就够了，虽然 README 里面有提到用 pnpm

[mark9804]

yarn 1 比起 pnpm 更不如说是和 npm 对标，yarn 胜在不容易抽风

[Arondight]

虽然 README 里面有提到用 pnpm

没有提到过

[mark9804]

有一个小问题，就是即使 pnpm install 了十遍甚至九遍 webstorm 会无限弹窗

[mark9804]

最近试了一些新东西，pnpm, pinia, vue-router，router 的限制太多了（ router-view 里面的 router-link 不能控制外层 view，大概要自己实现）整得有点头大

pnpm prettier 需要自己 resolve 软连接

module.exports = {
  plugins: [
    require.resolve("@trivago/prettier-plugin-sort-imports"),
    require.resolve("prettier-plugin-css-order"),
  ],
}

但是 package.json 中的 scripts 允许互相引用，执行可以选择忽略 run

  "scripts": {
    "format": "prettier --config .prettierrc.cjs -uw ./src/ *.md",
    "build:json": "node ./CICD/build_json.js",
    "build": "pnpm format; pnpm build:json; vite build",
    "preview": "pnpm build; vite preview --host",
  },

pnpm preview

pinia 那个文档的花体字给我整不会了，看得我杀心渐起

写了一个 stylus 注入进去正常多了

.token {
	font-family: monospace !important;
	font-style: unset !important;
}

vue devtools 里面可以直接查看 store 内容