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

脚手架入口文件开发

  • 创建脚手架项目: 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中的库
    • 这样可以确保项目中使用的是本地安装的、可能经过定制的库版本,而不是全局安装的版本
    • 这对于管理项目依赖和避免版本冲突非常有用
  • 此时,我们通用脚手架框架的入口文件开发完毕了

相关推荐
懒大王爱吃狼22 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js