持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第2天,点击查看活动详情
脚手架在开发前,需要做一些准备工作,这些工作包括拆包,包的创建,依赖安装,依赖引用等等。
脚手架拆包策略
拆包策略是按照功能划分的,前端脚手架一般按照模块功能分为:
- 核心模块:core
- 命令模块:commands
- 模型模块:models
- 工具模块:utils
因为修改了lerna原有包的结构,原来只有一个packages文件夹,所有的包都安装在packages下,现在我们把所有的子项目都放在根层级,不放在在packages下,所以需要修改lerna.json:
{
"packages": ["core/*", "models/*", "commands/*", "utils/*"],
"version": "1.0.4"
}
现在我们把core/models/commands/utils当成packages,这样更利于我们管理代码。
包的创建
拆包之后,我们如何创建包呢?其实,还是跟原来一样:
// 在utils文件夹下创建@yijiang-cli-dev/log包
npx lerna create @yijiang-cli-dev/log utils
第三方依赖安装
创建包之后,还需要对log包安装依赖:
// 在utils/log包下安装npmlog,使用lerna就没有必要还要进入cd到utils/log,这样就省去了很多麻烦
npx lerna add npmlog utils/log
【注意】如果使用
lerna add安装,会导致引用本地的包失效,这是lerna的一个bug,所以最好还是进入到对应的包中使用npm install npmlog安装。目前开发使用的是lerna4.0版本,也许最新的lerna修复了这个问题。
不过推荐使用npm install npmlog,前提是进入包的目录下。
对本地包的安装
如果我想对log包进行引用呢?
在cli包下的package.json加上:
"dependencies": {
"@yijiang-cli-dev/log": "file:../../utils/log"
}
file: 表示加载本地的文件
最后执行npm install @yijiang-cli-dev/log(注意,在执行这个命令时,一定要进入到cli目目录下),这样就会在cli包的node_modules中引入log包:
它软链接到本地的log包:
问题:这里为什么不用npm link呢?
在一个包下执行npm link,有两个作用:
1、如果这个包的package.json有bin这个字段,那么会把这个包注册为一个全局命令去使用,同时也会安装所有的依赖包。
2、如果这个包的package.json里面没有这个bin字段,那么会把这个包全局安装下node的node_modules下面,使其成为一个全局的包。
只有成为一个全局包,在cli包中引用这个包时,可以使用npm link来安装这个全局包,如果没有成为全局的包,cli包使用npm link是无法安装这个包的。
不过可以使用npm install来安装这个包(假如没有使用npm link使其成为全局包),写法必须是用file,而不是用版本号,版本号的话就从npm上安装了。
通过上面的解释,如果在cli包中想要通过npm link来引用log包,首先log包必须通过npm link使其成为一个全局包,这样就比较麻烦,直接使用npm install更加快捷。