看了下element-plus源码,发现里面用的npm workspace ,于是自己摸了下,分享下得到的成果
github源码:npm-workspace-test
建议结合源码进行学习
注意:workspaces 是 npm v7.x 也就是 Node@15.0.0 新增的功能,所以请保持你的本地环境版本大于它们。
npm workspace的作用
我们先看张图
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中
如何使用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