多项目共用node-modules

当我们负责多个项目的时候，每个项目都 install 一遍的时候，这不仅占了大量的电脑内存，而且当遇到那种难下载的包的时候，比如 node-sass，心中抑制不住的想要发火，今天就将多个项目如何共用一个node-modules做下简单的记录，就以yarn为例。

1、新建workspace

新建工作目录，也就是后面我们的node-modules都安装在这个目录下面，初始化package.json

// workspaces/package.json
{
  "name": "workspaces",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true
}

初始化完成package.json以后，我们就可以将我们的项目放到当前目录下了，也就长了这个样子

然后将每个项目都添加到最外层package的workspaces里面

workspaces：声明workspace中package的路径。值是一个字符串数组，支持Glob通配符。其中"packages/*"是社区的常见写法，也可以枚举所有package： “workspaces”: [“packageA”, “packageA”]

添加完以后我们就可以下载依赖了

二、安装依赖

安装依赖之前，先让我们看下每个项目的package.json

在这里我们可以看到vue的版本有2+，有3+，那么最后安装完会怎么样呢？

从图中我们可以到，最外层的node-modules就是三个项目公共的依赖，而projectC因为是vue3的，所以在projectC项目会单独安装，到这里项目配置基本完了。

三、项目启动

启动项目我们可以进入当前项目下进行启动，或者在最外层启动

// 1、项目里启动  （workspaces/projectA）
yarn dev
// 2、最外层跟目录下运行（workspaces）
yarn workspace project-a dev

下面我们说下第二种启动方式

yarn workspace 后面参数指的是要启动项目package.json的name值

四、yarn常用命令

1、查看所有workspaces信息

yarn workspaces info

{
  "project-a": {
    "location": "projectA",
    "workspaceDependencies": [],
    "mismatchedWorkspaceDependencies": []
  },
  "project-b": {
    "location": "projectB",
    "workspaceDependencies": [],
    "mismatchedWorkspaceDependencies": []
  },
  "project-c": {
    "location": "projectC",
    "workspaceDependencies": [],
    "mismatchedWorkspaceDependencies": []
  }
}

2、指定项目安装依赖

yarn workspace project-a add vue

3、给根应用安装依赖

// -W: --ignore-workspace-root-check ，允许依赖被安装在workspace的根目录
yarn add -W -D package

5、项目迁移问题

1、postcss问题
如果postcss是通过postcss.config.js配置的，在启动项目会报错，css找不到的问题
解决：暂时将postcss配置迁移到vue.config.js里面，如何通过postcss.config.js去设置有知道的大神可以指导下

2、依赖兼容
一些依赖在install的时候会拉取最新的版本，可能不兼容，我们可以通过在package.json里配置
resolutions字段来指定版本。

// package.json
{
...
"resolutions": {
    "commander": "^11.1.0"
  },
...
}