npm的workspace原理和使用,yyds

6,390 阅读1分钟

看了下element-plus源码,发现里面用的npm workspace ,于是自己摸了下,分享下得到的成果

github源码:npm-workspace-test

建议结合源码进行学习

注意:workspaces 是 npm v7.x 也就是 Node@15.0.0 新增的功能,所以请保持你的本地环境版本大于它们

npm workspace的作用

我们先看张图

1642994694741

1.依赖共享。子工作区可以使用主工作区的所有依赖

如主工作区中的package.json已经有依赖
"dependencies": {
  "number-precision": "^1.5.1",
  "vue": "^3.2.25"
},
那么子工作区可以直接引用,无需安装依赖

2.导出子工作区,供所有工作区使用。可以将子工作区导出到node_modules中,供所有工作区使用

# /package.json
"devDependencies": {
  "@fai/divide": "workspace:*",
  "@vitejs/plugin-vue": "^2.0.0",
  "rimraf": "3.0.2",
  "virtual-module": "^0.4.0",
  "vite": "2.7.13"
}

"@fai/divide": "workspace:*" 将divide整个工作区的文件放到了node_modules中

1642995908941

如何使用divide工作区文件
<script setup>
import HelloWorld from '@fai/divide'
</script>

要注意:divde里的文件修改的同时node_modules里的文件也会修改,两者的关系是实时同步的,那么这样的话,我们在任意一个工作空间修改东西,别的工作空间都能实时同步了。

是不是,yyds

关于workspace常用的命令

如何给模块安装依赖

npm install number-precision --workspace packages/divide
#也可简写为
npm i number-precision -w packages/divide

如果要给所有模块同时安装 dayjs 这个依赖:

# 注意 workspaces 这里多个 `s`
npm install dayjs --workspaces
# 也可简写为
npm i dayjs -ws

移除依赖

将 divide 模块中的 number-precision 依赖移除:

npm uninstall number-precision -w packages/divide

执行模块divide里面的 scripts

npm run dev -w packages/divide

感谢和参考

www.jianshu.com/p/b76d06b3e…

npm workspace