vue项目共享node_modules

vue项目共享node_modules

前言

npm 版本要 > 7

配置步骤

1. 在项目中共享 **node_modules** 文件夹:
   将所有项目都放在同一个文件夹下,在该文件夹下init package.json文件,将所有项目需要用到的依赖添加进来(注意:所有项目都应使用相同版本的依赖)
   在其中添加workspaces,值为需要使用共享依赖的文件夹名,
   例如:

"workspaces": [
  "uxOceanPark-ui",
  "uxoms-ui",
  "uxcore-ui"
],

2. 修改项目的路径指向:
   在每个项目的 vue.config.js 文件中修改路径指向(如果需要)，以确保正确引用共享的 node_modules。

// vue.config.js

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, '../node_modules/project1/src'),
        "@": path.resolve(__dirname, 'src')
      }
    }
  }
};

3. 忽略提交vue.config.js:
   忽略特定文件的后续修改，而不是完全忽略该文件，可以使用以下命令：

git update-index --assume-unchanged path/to/vue.config.js

例如:

git update-index --assume-unchanged project1/vue.config.js
git update-index --assume-unchanged project2/vue.config.js

当不再想忽略文件的变化时，可以使用：

git update-index --no-assume-unchanged path/to/vue.config.js

4. 提交代码:

使用了node_modules提交代码时可能会提示

> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
node:internal/modules/cjs/loader:1024
  throw err;
  ^

Error: Cannot find module '/Users/zhangyu/Desktop/Arno/ui-project/uxoms-ui/node_modules/yorkie/src/runner.js'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)
    at Function.Module._load (node:internal/modules/cjs/loader:866:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:22:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

pre-commit hook failed (add --no-verify to bypass)

我的解决办法是将共享node_modules的yorkie复制一份到项目的node_modules中

注意事项

1. 所有项目都应使用相同版本的依赖，以避免潜在的兼容性问题。
2. 忽略提交vue.config.js,以防将其提交到远程仓库
3. 路径解析使用nodejs的path模块