npm里存在感较低的角色- workspace

hello大家好,我是小九九的爸爸,本期给大家带来的内容是 workspace(工作区)。大家可能不太了解它,但是说一个点应该可以勾起大家的回忆,就是lerna。他们都是用来将最大的工作区域拆分成很多个小的工作区域。这种拆分思想,对于特定的项目来说是比较管用的。而这些特定的项目都有一个明显的特点,就是大应用由无数个耦合度较低的小应用组成。比如 组件库、中台类的项目等等,这样用户就可以选择性的安装其中某一个模块就可以了,也是一种按需使用的解决方案。

什么是workspace?

/**
    | - bigProject
        | - package.json
        | - node_modules
        | - package
            | - smallProject1
                | - package.json
            | - smallProject2
                | - package.json
*/

在上面的图中,我们存在3个工作区(workspace),分别是bigProject、smallProject1、smallProject2。那什么目录可以被叫做工作区呢?

如果一个目录拥有 package.json文件,那么这个目录就可以被叫做workspace。

如何创建workspace?

命令如下:

npm init -w 小工作区的目录

比如还是以上图为例,打开bigProject项目的终端,然后执行:

npm init -w ./package/smallProject1

npm init -w ./package/smallProject2

这样,我们就在bigProject大的工作目录下创建了2个小的workspace。我们可以通过以下命令来检测是否创建成功:

npm ls --workspaces

如果出现了下面类似的图形,那恭喜你创建workspace成功了。

npm里存在感较低的角色- workspace_第1张图片

如何管理workspace之间的依赖关系?

如果我们给smallProject1安装依赖,实现这个功能有2种方式,如下:

// 方式一:在bigProject根目录下执行以下命令
npm install moment -w smallProject

// 方式二:先进入到smallProject目录下,然后再执行npm install
cd smallProject
npm install moment

在第一种方式里,smallProject更准确的来说应该叫做“工作区的名称”,也就是各工作区下的package.json文件里的name的值。

这两种安装依赖的方式完全没区别,因为依赖都会被安装到根目录下(bigProject),类似下图:

npm里存在感较低的角色- workspace_第2张图片

因为所有的依赖,各workspace下的依赖都会被安装到根目录下,所以,所有的workspace是共享依赖的。

如何运行workspace下的命令

依然是2种方式,一种是 cd 到workspace目录下,然后执行具体的command。另一种是直接配置在上一层的workspace目录下:

// 修改bigProject目录下的pacakge.json
{
    "scripts": {
        "dev": "npm run dev --workspace=smallProject1"
    }
}

这样,当我们在bigProject目录下运行 npm run dev时,实际上就是运行的smallProject目录下的npm run dev的命令。

那有没有一种命令,可以让所有的workspace都执行一遍 npm run dev呢?答案是肯定的,我们只需要做出如下修改即可:

{
    "scripts": {
        "dev": "npm run dev --workspaces"
    }
}

此时所有的workspace都会执行一遍自己的 npm run dev命令,需要注意的是,如果有一个工作区的命令执行报错,那也不会终止剩余的workspace的运行。

跟workspace相关的npm命令有哪些?

还是很多的,主要是npm将workspace作为配置选项传递给大部分的npm command。比如 npm install --workspace,npm publish --workspace,npm list --workspaces等等,具体的请参考npm command。

最后

好啦,本期的分享到这里就结束啦,希望我的分享对你有帮助,我们下期再见~~

你可能感兴趣的:(npm,前端,node.js)