前端脚手架开发之工程搭建

98 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第2天,点击查看活动详情

脚手架在开发前,需要做一些准备工作,这些工作包括拆包,包的创建,依赖安装,依赖引用等等。

脚手架拆包策略

拆包策略是按照功能划分的,前端脚手架一般按照模块功能分为:

  • 核心模块:core
  • 命令模块:commands
  • 模型模块:models
  • 工具模块:utils

image.png

因为修改了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

image.png

第三方依赖安装

创建包之后,还需要对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包:

image.png

它软链接到本地的log包:

image.png

问题:这里为什么不用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更加快捷。