2-打造属于你的组件库-【工作区】

76 阅读2分钟

利用 工作区 替换 npm link 的方式,使项目更快

之前是使用 npm link 的方式,让包在各个项目之间能被使用, 然后又尝试用配置 alias 的方式去引入。

alias 的方式引入,在开发情况下几乎没有问题,打包也 ok,但由于在 package.json 中没有依赖,导致在导入 @pnm/ 的时候,没有智能提示(应该有其他方式做提示,暂时忘了,希望大佬提示提示)

最后还是想试试工作区的方式。

工作区的好处

  1. 开发相互依赖的包时,workspaces 会对 package 的引用设置软链接,比 yarn link 方便,且链接仅局限在当前的 workspaces 中,不会对整个系统造成影响。

  2. 所有 package 的依赖都会安装到 根目录的 node_modules 下,节省磁盘空间,给 yarn 更大的依赖优化空间

Yarn workspaces 的使用

// 根目录的 package.json
{
  "private": true, // 根目录一般是项目的脚手架,无需发布,"private": true会确保根目录不被发布出去。
  "workspaces": ["packages/*"]
}

然后直接在根目录下执行 yarn 命令即可。

Yarn workspaces 命令

# 显示当前项目的工作空间依赖树, yarn 2.x 移除了该命令
yarn workspaces info

# 执行所有包中 package.json 的 <command> 命令
yarn workspaces run <command>

####
###
##

# 在foo中添加react,react-dom作为devDependencies
yarn workspace foo add react react-dom -D

# 移除bar中的lodash依赖
yarn workspace bar remove lodash

# 运行bar中package.json的 <command> 命令
yarn workspace bar run <command>

好奇

Yarn WorkspacesYarn 提供的 monorepo 的依赖管理机制,他也能一起执行项目的build release 等命令, 那还要 Changesetslerna 干嘛?

【解】: 工作区是为了解决 依赖 的问题, 他可以把依赖提升到 根目录 。而 Changesets 这类是用来解决 构建 发布 版本管理 等(比如:帮你把修改的包添加版本)


踩坑

  1. yarn changeset publish --registry=http://0.0.0.0:4567 去上传私库失败 401,一直提示说,我没登录,让我登录。但我一直确实是登录了的。。而且单独运行 npm/yarn publish 成功

    特奶奶的,发现原因了,单独调用 `yarn add 或 yarn publish` , 如果项目根目录有 `.npmrc`,则会从 `.npmrc` 中读取一些配置,比如你的 `registry`
    
    但是,`yarn changeset publish --registry=http://0.0.0.0:4567` 哪怕你写了 `registry` ,他也不会去读 `.npmrc`,他就特么一定要去读 `.yarnrc` 的文件
    
    所以,你用 `npm changeset publish` ,或者添加 `.yarnrc` 之后在调用 `yarn changeset publish` 也可以1
    
  2. 由于样式作用域 的问题,build package 失败

    最后发现是报错: Parameter 'n' implicitly has an 'any' type
    解决方法: tsconfig.json 里关闭严格模式(不建议,但无奈,目前只能先如此解决)