添加模块
添加模块
添加一般模块
在
packages
目录下,任意位置,新建模块目录。例如:moduleA请参考已有模块,在目录 moduleA 下,新建文件
package.json
,rollup.config.js
,tsconfig.json
package.json
: Node 工程基础配置rollup.config.js
: Rollup 本模块配置文件tsconfig.json
: Typescript 本模块配置文件
注意
package.json
中一定要指定 name
的值。这个值就是以后引用模块,编译模块的核心名称。其它配置请结合实际进行修改和配置。
- 在目录 moduleA 下,新建文件夹
src
,types
src
: 源代码放置目录,可以根据自身需求修改。types
: Typescript 定义文件放置目录,可以根据自身需求修改。
- 在工程中找到
${project_home}/package.json
。在workspaces
属性中添加新增模块的目录。
以目录 moduleA 为例,在 workspaces
中添加如下目录配置。
"workspaces": [
"packages/moduleA",
···
],
- 以上工作完成之后,就可以在控制台中,通过以下命令,执行新增模块的相关命令。
假设目录 moduleA 中的模块,名称为 @hecate/moduleA
。通过以下命令执行相关操作。
yarn workspace @hecate/moduleA XXX
说明
workspace
: 因为工程中有多个模块,通过该参数进行区分@hecate/moduleA
: 就是在该模块下,package.json
中name
属性值。XXX
: 代表的是,在该模块下package.json
中scripts
属性中定义的命令
- 定义简化命令
上一步中,执行的命令比较长,不方便记忆和使用。可以在工程中找到${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
以上只是示例,可以结合实际定义自己的简化命令。
- 其它模块应用该模块。
可以通过以下命令,实现其它模块对该模块的依赖引用。
// 将模块@hecate/moduleA 添加到 模块中@hecate/moduleA
lerna add @hecate/moduleA --scope @hecate/moduleB
添加Vue工程
将一个单独的Vue工程,添加到工程中,作为一个模块使用。具体方法与 添加一般模块 类似。
新建一个Vue工程,使用 Vue Cli 或任意你喜欢的方式都可以。
在
packages
目录下,任意位置,新建模块目录。将刚刚新建的Vue工程代码拷贝至,新建的模块目录下。
按照添加一般模块中,第4~7步的说明,同样操作一遍即可。
说明
使用 Vue Cli 会新建标准的 Vue 工程,package.json
中会包含完整的依赖包。只用 Monorepo
方式管理项目,可以将共性的依赖包放到模块外部进行统一管理,各个模块只需要管理自身所需要的依赖包即可。
因此,可以对比 @herodotus/ui
模块的 package.json
的依赖定义,将新建的 Vue工程中,重复的依赖去掉。