跳至主要內容

添加模块

码匠君大约 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. 以上工作完成之后，就可以在控制台中，通过以下命令，执行新增模块的相关命令。

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

yarn workspace @hecate/moduleA XXX

说明

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

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

例如：

{
    "name": "root",
    "workspaces": [
        "packages/moduleA",
        ···
    ],
    "scripts": {
        "h:mA": "yarn workspace @hecate/moduleA",
        ···
    },
}

那么，执行以下命令

yarn h:mA XXX

// 等价于

yarn workspace @hecate/moduleA XXX

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

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

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

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

添加Vue工程

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

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

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

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

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

说明

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

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