Yarn 2.x 实践

·  阅读 1188

安装和升级

# 安装1.x版本
npm install -g yarn
# 查看版本号
yarn --version
# 升级2.x版本,只能针对单个项目操作,且必须使用系统代理
yarn policies set-version berry
# yarn升级到最新发布版本
yarn set version latest
# nodeLinker 默认值是 pnp, yarn install后不生成node_modules目录,项目运行有些依赖会报错,建议直接改 node-modules
nodeLinker: node-modules
复制代码

参考官网迁移指南

yarn升级2.x后项目中自动生成配置文件 .yarnrc.yml,1.x使用的.npmrc.yarnrc不再生效。

以上步骤执行后生成的.yarn 目录和 .yarnrc.yml 文件都应该提交到仓库。

使用 yarn config set 命令设置的值会写入 .yarnrc.yml 文件。

PS: 执行 yarn policies 时不使用系统代理会遇到如下错误:

Resolving berry to a url...
Downloading https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js: getaddrinfo ENOENT raw.githubusercontent.com".
复制代码

修改镜像源

增删改查

# 查看当前配置与可配置项
yarn config
# 查看当前镜像源(1.x 使用 yarn config get registry, 2.x不再使用 registry 关键字)
# 如果当前项目没有设置过npmRegistryServer,将取全局设置的值
yarn config get npmRegistryServer
# 修改镜像源
yarn config set npmRegistryServer http://npm.xxx.com
复制代码

如果使用的是私有镜像源,执行 yarn install 时可能会遇到以下问题:

http 访问的镜像源必须配置白名单

报错如下:

➤ YN0001: │ Error: @rescripts/cli@npm:^0.0.16: Unsafe http requests must be explicitly whitelisted in your configuration (npm.xxx.com)
复制代码

官方解决方案,执行:

yarn config set unsafeHttpWhitelist --json '["*.xxx.com", "xxx.com"]'
复制代码

不知道为什么,总是报错:

Unknown Syntax Error: Extraneous positional argument ("xxx.com]'").
复制代码

找不到相关资料(欢迎知道原因的朋友在留言里告知答案~),直接修改 .yarnrc.yml 解决:

unsafeHttpWhitelist:
    - npm.xxx.com
    - xxx.com
复制代码

登陆私有镜像源

yarn config set npmAlwaysAuth true
yarn config set npmRegistryServer http://npm.xxx.com
yarn npm login
# 如果执行yarn npm login输入账号密码后报错可以直接设置 npmAuthToken
yarn config set npmAuthToken <yourToken>
复制代码

参考 github.com/yarnpkg/ber…

PS:运行 yarn npm login,登陆 Verdaccio 镜像源时会遇到409错误:

 YN0001: HTTPError: Response code 409 (Conflict)
    at se.<anonymous> (D:\workspace\xxx\.yarn\releases\yarn-berry.cjs:23:10082)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
复制代码

如何获取 npmAuthToken

  1. 将 npm 镜像源切换到将要登陆的私有镜像源;

  2. 执行 npm login,输入用户名密码登陆;

  3. 找到 C:\Users\admin\.npmrc文件,找到下面的代码

    //npm.xxx.com/:_authToken="<yourToken>"
    复制代码

常用命令

安装和删除包

# 安装所有依赖
yarn install
# Add a package as a dependency
yarn add xxx
yarn add xxx@1.2.3
yarn add xxx@https://github.com/xxx/xxx
# Add a package as a dev dependency
yarn add -D xxx
yarn add --dev xxx
# 从当前项目删除
yarn remove xxx
# 从所有 workspaces 删除
yarn remove xxx --all
# 删除eslint-开头的包
yarn remove 'eslint-*'
# 删除@babel目录中的包
yarn remove '@babel/*'
# 删除所有匹配react-dom 或 react-helmet的包
yarn remove 'react-{dom,helmet}'
复制代码

yarn workspace

工作区目录结构

workspace
│  package.json
├─app-1
│  │  package.json
│  └─...
└─app-2
  │  package.json
  └─...
复制代码

workspace>package.json 配置

{
    "private": true,
    "workspaces": ["app-1", "app-2"]
}
复制代码

常用命令(workspace目录中执行)

# 安装插件(需要翻墙),否则执行 yarn workspaces 会提示command not found
yarn plugin import workspace-tools
# 安装所有项目依赖
yarn install
# 查看包含的项目及依赖关系
yarn workspaces list --json
# 在所有workspaces包含的所有项目下执行命令
# 如 yarn workspaces foreach run build
yarn workspaces foreach run build
# 针对某一项目进行操作
# 如 yarn workspace app-1 run build
yarn workspace <workspaceName> <commandName>

复制代码
分类:
前端
标签:
分类:
前端
标签: