持续创作,加速成长!这是我参与「掘金日新计划 · 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
更加快捷。