脚手架实现原理

为什么全局安装@vue/cli后会添加命令为vue

实际注册的命令是package.json中bin配置的

全局安装@vue/cli是发生了什么

npm会查看package.json,如果发现了bin字段就会在全局node_module同级目录创建可执行文件

执行vue命令时发生了什么?为什么vue指向一个js文件,我们却可以直接通过vue命令去执行它

1.在环境变量中寻找vue命令,如果存在就先找到实际的包目录(有可能是软连接)再执行命令入口文件;
2.因为入口js 顶部 声明了使用node去执行,!# /usr/bin/env node; 执行vue命令时传入的第一个参数是node

Yargs常用API和开发流程

传递参数:

require('yargs/yargs')(process.argv.slice(2)).argv 等价于 require('yargs/yargs')(process.argv.slice(2)).parse()

const { hideBin } = require('yargs/helpers'); process.argv.slice(2) 等价于 hideBin(process.argv)

脚手架初始化流程

• Yargs() - 构造函数
• Yargs.options - 批量注册全局options
• Yargs.option - 单个注册全局option
• Yargs.group - 给定options的键值 将其归于一个分组
• Yargs.demandCommand - 允许输入的参数最小个数 不满足时报错
• Yargs.recommendCommands - 如果找不到匹配的命令 提示类似命令
• Yargs.strict - 无法识别命令会报错
• Yargs.fail - 所有错误处理函数
• Yargs.alias - 为option 指定别名
• Yargs.wrap - 为命令行指定宽度
• Yargs.epilogue - 再命令行结尾输出信息

  Yargs.command

• Yargs.command(command, describe, builder, handler)
• Yargs.command({ command, describe, builder, handler })
  • command - 命令字符串
  • describe - 命令描述
  • builder - 添加命令的options
  • handler - 命令处理函数,处理具体业务

    lerna的实现原理

    lerna简单说明

• lerna是基于git+npm 的多package项目管理工具;主要解决了多包管理的重复操作,操作的标准化,提高了效能;
  • 主要api
    • lerna init初始化项目
    • lerna create 创建package
    • lerna add 安装依赖
    • lerna link link包的依赖
    • lerna publish 发布到npm上
  • 给特定的package执行命令使用filter-options --scope

    lerna原理

• 通过import-local优先调用本地项目: lerna中使用微任务执行命令 在全局入口判断有本地lerna项目的情况下会加载本地项目并执行,然后执行宏任务下的代码输出 using local version of lerna
• 通过yargs生成脚手架
• lerna 通过配置package.json本地依赖的方式进行本地开发,写法"module-name":'file:your-local-module-path',lerna再发布时会自动替换该路径

  require.resolve 实现原理

• 通过Module._resolveFileName 解析文件名 解析出绝对路径;首先调用Module._resolveLookupPaths逐层往上级目录找并拼接/node_modules存到paths数组中返回paths;然后通过Module._findPath找到真实模块路径;