前端架构: 脚手架通用框架封装之入口文件开发(教程一)

脚手架入口文件开发

创建脚手架项目: abc-cli
- $ mkdir abc-cli && cd abc-cli
全局安装 lerna, $ npm i -g lerna
基于 lerna 完成项目初始化
- $ lerna init
基于 lerna 创建脚手架 cli
- $ lerna create cli
- 一路回车
好现在生成了一个 cli 的模板，目前需要修改它
新建 abc-cli/packages/cli/bin/cli.js
js 复制代码
```
#!/usr/bin/env node

console.log(1)
```
到 abc-cli/packages/cli/package.json 中修改
- "name": "@abc.com/cli" 目前假设我们的组织是 abc.com
- "main": "lib/index.js" 入口文件修改名称
- "bin": { "abc-cli": "bin/cli.js" } 添加 bin 配置
- "files": [ "lib", "bin" ] 在 files 中添加 bin
在 abc-cli/packages/cli 中执行 $ npm link
- 这样，验证执行 $ abc-cli 没有报错, 正常输出1，就行
现在为cli包添加依赖, 在顶层 abc-cli 目录下执行
- $ npm i import-local npmlog -w @abc.com/cli

新建文件 abc-cli/packages/cli/lib/index.js

js 复制代码

module.exports = (args) => {
  console.log('args: ', args);
}

修改 abc-cli/packages/cli/bin/cli.js

js 复制代码

#!/usr/bin/env node

const il = require('import-local');
const log = require('npmlog');
const entry = require('../lib/index.js');

// 判断 __filename 是否可以加载到本地的版本
if (il(__filename)) {
  log.info('abc-cli', '使用本地版本'); // 这里不会走
} else {
  entry(process.argv.slice(2)); // 会执行这里
}

因为之前在 cli 包内执行了 npm link, 所以，这里一定会走 else
验证，执行 $ abc-cli 123, 终端输出如下
js 复制代码
```
$ abc-cli 123
args:  [ '123' ]
```
注意，这里 import-local 包
- 它的主要作用是导入本地包，以避免全局npm包和本地项目中的包产生冲突
- 当全局node_modules和本地node_modules中存在相同的库时，import-local会优先加载本地node_modules中的库
- 这样可以确保项目中使用的是本地安装的、可能经过定制的库版本，而不是全局安装的版本
- 这对于管理项目依赖和避免版本冲突非常有用
此时，我们通用脚手架框架的入口文件开发完毕了