共计 1832 个字符,预计需要花费 5 分钟才能阅读完成。
横向比照
依赖治理 | 问题 | |
---|---|---|
npm | node_modules 树形构造 | 暗藏依赖反复装置 |
npm > v3 | node_modules flatten mode | 反复援用 |
yarn | node_modules flatten mode | 反复援用 |
yarn2(berry) | Plug’n’Play 每个包压缩成 zip, **.pnp.js 纪录包版本和磁盘映射地位 | vue 生态反对欠佳 |
pnmp | node_modules 树形构造, 操作系统级别 hard link 防止反复装置 |
yarn2 摸索
yarn2 目测是最好的计划, 且背地有 fb 背书.
应用 pnp 革新后我的项目也能失常运行
革新步骤如下:
- 查看以后 yarn 版本
$ yarn --version
1.22.11
- 设置应用 yarn2
$ yarn set version berry
- 设置完了之后,查看 yarn 的版本号,>3 是失常状况:
$ yarn --version
3.0.0
- 配置
yarn-berry.cjs
$ yarn config set npmRegistryServer https://registry.npm.taobao.org
- 删除旧的 node_modules 文件夹和 yarn.lock 文件,并重建整个我的项目:
$ rm -rf node_modules
$ rm -f yarn.lock
$ yarn
- 启动我的项目 yarn serve/start/build …, 解决 yarn 报的依赖谬误, 通常是因为之前的一些依赖没有在 package.json 中显示的申明,
yarn install xxx
就能解决 - shell 错误处理完之后如果浏览器能失常跑起来我的项目, 则革新结束. 若浏览器 console 报错:
Error: Your application tried to access xxxxxx, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
如果 package.json 不蕴含, yarn install 之, 若装置后还报错, 批改.yarnrc.yml
, 增加如下:
# 包名 / 版本号自理
packageExtensions:
'mmnn@*':
dependencies:
'xxyy': '*'
增加完了执行yarn install
, 再从新跑我的项目
- yarn2 插件
插件一览
倡议至多装置 typescript 插件
# 主动增加 @types 依赖
$ yarn plugin import typescript
- ide 反对: 以 vscode 为例:
$ yarn dlx @yarnpkg/sdks vscode
then: Change your VSCode workspace configuration to add the following:
“typescript.tsdk”: “.yarn/sdks/typescript/lib”
至此, ide 能失常对 ts 进行动态类型推断, 也能都 js 依赖进行解析, 上述步骤中如果须要批改 tsconfig.json 之类的过程不赘述.
然而, 问题来了: vue 文件中 vetur 提供的类型推断全副都不失效了
<div id=”Vue-support-is-not-good”></div>
yarn2 vue 生态反对欠佳
猜想如下:
- yarn2 pnp 文件系统 是基于 zip 压缩包, vetur 并未且没有打算提供反对1 2 3
- yarn2 是 react 的东家 fb 开源的, 默认不关照 vue 也失常?
<div id=”ref-1″></div>
[[1]Vetur cannot use Prettier installed via Yarn Berry (PnP) #2092](https://github.com/vuejs/vetu…)
<div id=”ref-2″></div>
[[2]yarn@berry support](https://github.com/vuejs/vetu…)
<div id=”ref-3″></div>
[[2]support yarn pnp mode](https://github.com/vuejs/vetu…)
yarn2 临时玩不转, 思考 pnpm
pnpm vs npm(应用边端我的项目演示, 我的项目较小, 成果不是很显著)
pnpm | npm | |
---|---|---|
node_modules 体积 | ||
node_modules 文件数 | ||
dev server 启动工夫 | ||
dev server 单次编译 | ||
打包 |
迁徙到 pnpm
开发环境
简直不必改变, 装置 pnpm, 移除 node_modules 文件夹, pnpm install
即可, 日常应用与 npm 简直无异