记录：自定义node命令行工具

林兮
342 阅读3分钟

介绍

本文主要介绍如何搭建一个属于自己的前端脚手架过程。
目的：理解脚手架搭建过程，优化用户与输入命令的过程交互。实现下载对应的模板。

环境

node version: 16.15.1;

前置知识

理解 npm link 和 shebang(指定脚本解释程序) 以及 js模块体系;

package.json中的bin属性 bin属性用来将可执行文件加载到全局环境中，指定了bin字段的npm包，一旦在全局安装，就会被加载到全局环境中，可以通过别名来执行该文件。

  • npm link 概念： npm link docs
    npm link: 是一种可以把包链接到包文件夹的方式，即-可以在不发布npm模块的情况下，调试该模块，并修改模块后会实时生效，不需要通过npm install 进行安装 ; npm link命令可以将一个任意位置的npm包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。

    工作原理简单过程：

    1. 为 npm包 创建软链接，将其链接到 {prefix}/lib/node_modules/<package-name> 是一种快捷方式。
    2. 为可执行文件(bin)创建软链接，将其链接到 {prefix}/bin/{name}

    结果：创建 执行可执行命令 和 包快捷方式；

    npm config set prefix // 查看全局包的位置
npm config set prefix “D:\nodejs\node_global” // 设置全局包目录
npm config set cache “D:\nodejs\node_cache” // 设置缓存目录

    使用 nvm nodejs版本管理工具的目录结构会有所不同。
    npm unlink <package-name> 解除模块的全局链接;

  • Shebang(#! /usr/bin/env node): 用于指明这个脚本文件的解释程序。

    告诉系统，使用指定的 node 执行脚本文件。 /user/bin/env 就是告诉系统可以在 path 目录中查找。就是为了解决不同的用户 node 路径不同的问题。可以让系统动态的去查找 node 来执行你的脚本。

  • js 模块体系：

主要是注意 CommonJS 和 ES Module 用法和区别; JS模块体系发展过程

node npm 默认的 commonJS 的模块方案，明显标志：module.exports 定义模块，require('xx') 导入模块； package.json 没有配置 type 或者 "type":"commonjs", 默认使用的是 commonJS方案，
配置 "type": "module", 则使用的 ES Module 模块方案 , import 导入模块。

image.png

npm link和(#! /usr/bin/env node)配置注意：

1. 必须配置 npm config set prefix '全局包目录';

设置全局包目录:
例如：npm config set prefix “D:\nodejs\node_global”
方法将 node_global配置到系统环境变量中，方便命令全局执行。

2. 必须把 prefix 全局包目录配置到电脑的环境变量中;

把全局包目录，配置到系统环境变量中。否则无法全局执行(可全局包路径下局部执行)，全局安装(发布后 npm i -g xxx)后执行命令(xxx)的时候会出现 "XXX 不是内部或者外部命令..."

3. package.json中的bin选项的value值的js文件顶部必须设置 #! /usr/bin/env node

#! /usr/bin/env node 是固定写法，没有配置系统无法调用node 执行脚本。

搭建流程：

业务流程： image.png

实现过程： image.png

脚手架搭建示例：

依赖工具库：

  1. commander 完整的nodejs 命令行解决方案； 解析用户输入命令：commander 中文文档
  2. chalk 在终端打印彩色文字： chalk 高亮字符串颜色
  3. inquirer 通用交互命令行用户界面的集合：inquirer 用户与命令行交互的工具
  4. download-git-repo 下载提取git库： download-git-repo下载提取git库
  5. handlebars 模板引擎工具对html,package.json重写 handlebars
  6. ejs 模板引擎工具 ， 对html文件进行改写 ejs
  7. fs-extra 拓展原生fs模块方法: fs-extra

npm发布

npm发布就两步：1. 登录， 2. 发布。

1. 登录

    npm login

65ef1da27904a2eb55aca3c6e2bf846.jpg 如果 npm的 registry设置为cnpm 时， npm login 会报错。。 例如：403 code。需要把 registry改为： npm config set registry http://registry.npmjs.org

2. 发布

npm发布时，注意版本号要和上一次不一样。否则会失败。

npm publish

image.png

参考代码地址：seals

推荐不错的文章： vue-cli源码分析 vue-cli-analysis

avatar
文章
阅读
粉丝