当前位置：首页 > wzjs >正文

武清网站开发优化内容

wzjs 2025/8/7 20:58:03

武清网站开发,优化内容,电商网站建设代码大全,自建外贸网站做B2B当package.json 里面出现 workspace:*，一般用的是 MonoRepo 策略，关于这个策略，懂的就懂，不懂的也可以继续看下去，能理解 workspace:* 的当使用 workspace 的时候，一般是我们有一个专门存放公共包&#…

当package.json 里面出现 workspace:*，一般用的是 MonoRepo 策略，关于这个策略，懂的就懂，不懂的也可以继续看下去，能理解 workspace:* 的

当使用 workspace 的时候，一般是我们有一个专门存放公共包（方法，组件）的工作，供其他项目使用，而不需要在每个项目中单独下载

下面我用例子解释一下

先解释一下 package.json 里面有这个

"private": true,

代表这个包（项目）是私有的，不会 publish 到 npm上面，一般要出现 workspace 都会设置这个值为 true 的

接下来我用例子解释一下，由于目前版本的npm（7.x 及以上版本）和 Yarn（1.x 及以上版本）对 workspace 都支持,pnpm 是原生就支持的，所以下面我用 npm 来进行演示

我现在有一个文件夹 trim ，用 vscode 打开，并进行

npm init

此时会在该目录下生成 package.json 文件，然后我们在 package.json 中添加

  "private": true,"workspaces": ["packages/*"],

这段配置代表我们当前的项目是私有的，不会发布到 npm 上去，并且，我们把当前目录下的 packages 文件夹作为工作区

之后我们在目录下创建两个文件夹 packages 和 apps，由于一般会有多个公共的包，所以再在 packages 创建一个文件夹叫 log，然后进入到 log 文件夹，也进行初始化

cd .\packages\log\

npm init

之后把 log 里面的 package.json 的 name 改为 @log/trim,此时文件的目录是这个样子的

然后再在 log 目录下建一个 index.js 文件，里面写一个公共的方法

export function trimLog(str){return `这是你要内容${str}`
}

此时我们切换到根目录 trim 进行

npm install

可以看到 npm 自动把我们工作区的包生成了一个 node_modules

接下来测试能否使用

我们进入到 apps 目录进行创建 vue 项目，然后在安装相关依赖

cd .\apps\

npm create vite

cd 你的vue项目目录

npm i

我们把 vue 项目里面的 App.vue 代码改为

<script setup>
import { trimLog } from '@log/trim'
const handleClick = () => {console.log(trimLog('点击了'))
}
</script><template><div><div @click="handleClick">点击我试试</div></div>
</template><style scoped></style>

此时，vue 的 App.vue 和 vue 里面的 package.json 是这样的