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

脚手架入口文件开发

• 创建脚手架项目: 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

  #!/usr/bin/env node
  
  console.log(1)
  1
  2
  3

• 到 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

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

• 修改 abc-cli/packages/cli/bin/cli.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)); // 会执行这里
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

• 因为之前在 cli 包内执行了 npm link, 所以，这里一定会走 else

• 验证，执行 $ abc-cli 123, 终端输出如下

  $ abc-cli 123
  args:  [ '123' ]
  1
  2

• 注意，这里 import-local 包

  • 它的主要作用是导入本地包，以避免全局npm包和本地项目中的包产生冲突
  • 当全局node_modules和本地node_modules中存在相同的库时，import-local会优先加载本地node_modules中的库
  • 这样可以确保项目中使用的是本地安装的、可能经过定制的库版本，而不是全局安装的版本
  • 这对于管理项目依赖和避免版本冲突非常有用

• 此时，我们通用脚手架框架的入口文件开发完毕了