添加模块

码匠君 ... 2021-10-28 大约 3 分钟

# 添加模块

# 添加一般模块

  1. packages目录下,任意位置,新建模块目录。例如:moduleA

  2. 请参考已有模块,在目录 moduleA 下,新建文件 package.json, rollup.config.js, tsconfig.json

  • package.json: Node 工程基础配置
  • rollup.config.js: Rollup 本模块配置文件
  • tsconfig.json: Typescript 本模块配置文件

注意

package.json 中一定要指定 name 的值。这个值就是以后引用模块,编译模块的核心名称。其它配置请结合实际进行修改和配置。

  1. 在目录 moduleA 下,新建文件夹 src, types
  • src: 源代码放置目录,可以根据自身需求修改。
  • types: Typescript 定义文件放置目录,可以根据自身需求修改。
  1. 在工程中找到${project_home}/package.json。在 workspaces属性中添加新增模块的目录。

以目录 moduleA 为例,在 workspaces 中添加如下目录配置。

   "workspaces": [
        "packages/moduleA",
        ···
    ],
1
2
3
4
  1. 以上工作完成之后,就可以在控制台中,通过以下命令,执行新增模块的相关命令。

假设目录 moduleA 中的模块,名称为 @hecate/moduleA。通过以下命令执行相关操作。

yarn workspace @hecate/moduleA XXX
1

说明

  • workspace: 因为工程中有多个模块,通过该参数进行区分
  • @hecate/moduleA: 就是在该模块下,package.jsonname 属性值。
  • XXX: 代表的是,在该模块下package.jsonscripts 属性中定义的命令
  1. 定义简化命令

上一步中,执行的命令比较长,不方便记忆和使用。可以在工程中找到${project_home}/package.json,在其中scripts 属性中定义简化命令,实现简化命令与一个或多个模块内命令的映射。

例如:

{
    "name": "root",
    "workspaces": [
        "packages/moduleA",
        ···
    ],
    "scripts": {
        "h:mA": "yarn workspace @hecate/moduleA",
        ···
    },
}
1
2
3
4
5
6
7
8
9
10
11

那么,执行以下命令

yarn h:mA XXX

// 等价于

yarn workspace @hecate/moduleA XXX
1
2
3
4
5

以上只是示例,可以结合实际定义自己的简化命令。

  1. 其它模块应用该模块。

可以通过以下命令,实现其它模块对该模块的依赖引用。

// 将模块@hecate/moduleA 添加到 模块中@hecate/moduleA
lerna add @hecate/moduleA --scope @hecate/moduleB
1
2

# 添加Vue工程

将一个单独的Vue工程,添加到工程中,作为一个模块使用。具体方法与 添加一般模块 类似。

  1. 新建一个Vue工程,使用 Vue Cli 或任意你喜欢的方式都可以。

  2. packages目录下,任意位置,新建模块目录。

  3. 将刚刚新建的Vue工程代码拷贝至,新建的模块目录下。

  4. 按照添加一般模块中,第4~7步的说明,同样操作一遍即可。

说明

使用 Vue Cli 会新建标准的 Vue 工程,package.json 中会包含完整的依赖包。只用 Monorepo 方式管理项目,可以将共性的依赖包放到模块外部进行统一管理,各个模块只需要管理自身所需要的依赖包即可。

因此,可以对比 @herodotus/ui 模块的 package.json 的依赖定义,将新建的 Vue工程中,重复的依赖去掉。

上次编辑于: 2021年10月28日 23:24
贡献者: herodotus