利用节点命令行工具实现项目工程自动初始化的标准过程

一、目的

传统前端项目的初始流程一般如下：

可以看出，传统的初始化步骤需要花费大量的时间。而且，在人工操作的情况下，总会有漏液修正。这个缺点有时是致命的。

连马大哈都没有更新项目仓库地址，导致代码提交到老仓库，非常尴尬。基于这些情况，编写命令行工具(CLI)的目的很明确：

对于新项目工程的初始化，可以使用工具进行初始化，可以节省项目初始阶段的准备时间，避免修改和泄露的情况，消除不更新项目版本仓库地址的问题

下面是一个新的流程图：

以下是自动化流程图：

从流程图中可以得出两条重要信息：

配置信息模板文件

命令行工具的作用是融合两条信息，为用户提供一个交互平台。

二、自动化流程分析

三、工具准备

配置信息的获取取决于与用户的交互。因为程序员通常使用终端输入命令来操作项目。因此，选择了两种工具进行支持。

指挥官

基于Ruby命令器概念的命令行执行完成解决方案

指挥官可以接收从命令行传入的参数

示例：

npg-CLI- help NPM-package-CLI usage : npg-CLI[选项]Options: -V，- version输出版本号-h，-help输出使用信息运行testcli并编辑设置. inquirer

常见交互式命令行用户界面的集合。

查询者与用户交互，并接收带有查询语句的参数

示例：

按照提示完成项目配置。项目名称测试？1.0.0版？描述

3.1 配置信息工具

前端的JavaScript模板引擎，比如ejs、jade等。可以根据传入的参数替换模板标签，最后生成html。

如果所有项目文件，无论文件后缀如何，都被视为ejs模板，那么ejs语法可以用于文件内容。然后根据配置信息进行替换，最后生成新文件。

事实上，基于这种想法，行业已经产生了成熟的工具。

mem-fs

Mem-fs读取文件并将其存储在内存中。

mem-fs-编辑器

Mem-fs-editor使用ejs语法编译内存中的文件信息。最后，调用commit方法输出最终文件。

3.2 模板信息工具

提示信息，除了console.log，还可以使用颜色更丰富的粉笔。这样可以输出更加直观友好的提示。

3.3 提示信息工具

文件操作，拥有业内成熟的shelljs。使用shelljs，您可以简化项目中的以下步骤：

有些项目文件不需要修改，直接复制就可以了。它可以由shelljs.copySync同步生成.有些文件夹需要提前构建，可以使用shelljs.mkdir创建

3.4 文件操作

以下根据开源项目——npm-package-cli的创建过程进行划分和说明。

四、实现

新建一个项目文件夹npm-package-cli，在这个文件夹下运行npm init生成package.json项目结构如下：

NPM-package-CLI |-package . JSON

4.1 初始化

这里要生成的全局指令是npg-cli。

4.2 生成全局指令

创建一个新的文件夹bin，并在该文件夹下创建一个名为cli的新shell脚本文件(注意：不允许有后缀)。Clishell脚本文件内容如下：

#!/usr/bin/env node console . log(' hello world ')；#在哪里！/usr/bin/env节点告诉编译器作为节点运行代码。

将以下内容添加到package.json中：

bin ' : { ' npg-CLI ' : ' bin/CLI ' }此时项目结构如下：

有两种方法可以链接到NPM-package-CLI |-bin |-CLI |-package . JSON

4.2.1 新建执行文件

的说明：

npm链接

npm安装-g

这两种方法都需要在npm-package-cli文件夹下运行才能生效。功能是将npg-cli指令指向全局bin文件，实现软链接。

4.2.2 链接指令到全局

在任何文件夹中运行命令：

Npg-cli#在这里输出hello world，即使完成了一个基本指令，下一步也是细化指令的工作内容。

4.2.3 运行

创作的作用是整合所有操作，并提供接口给指令文件cli。创造的结构如下：

class Creation { constructor(){//code } do(){//code }//其他函数}其中做方法暴露给脚本文件硬币指示器(硬币水平指示器的缩写)命令行界面(批处理脚本的命令行界面)调用。

创造类放在src/index.js中。

此时，项目结构如下：

NPM-包-命令行界面|-bin |-命令行界面|-src |-索引。js |-包。JSON

4.3 初始化操作类Creation

#！/usr/bin/env节点成本创建者=必需('./src/index。js’)；const project=new Creator()；项目。do()；这样，只要实现好做方法，就可以完成npg-cli指令的运行了。

4.4 修改cli文件

实现npg-cli -帮助，需要借助上文提到的工具指挥官。新建src/command.js文件，文件内容如下：

const commander=require(' commander ')；常数粉笔=require('粉笔');const packageJson=require('./package。JSON’)；const log=console.log函数init command(){ commander。版本(包JSON。版本).on(' - help '，()={ log(查克。绿色)()运行testcli并编辑设置。));}) .解析(进程。argv)；} module.exports=initCommand此时，项目结构如下：

NPM-包-命令行界面|-bin |-命令行界面|-src |-命令。js |-索引。js |-包。数据然后在创作方法内执行initCommand()即可生效。

//src/index。js创建onst init命令=require(' ./command ')；类创建{ //其他代码do(){ initCommand()；}}此时，运行npg-cli -帮助指令，就可以看到：

用法： npg-CLI[选项]选项： -V，-版本输出版本号救命输出使用信息运行testcli并编辑设置。

4.5 实现命令行参数读取

要获取用户输入的信息，需要借助工具问询者。新建src/setting.js文件，文件内容如下：

const inquirer=require(' inquirer ')；const fse=require(' fs-extra ')；函数initSetting(){ let prompt=[{ type : ' input '，name: 'projectName '，message: 'project name '，validate(input){ if(！输入){返回'需要项目名称} if(fse。existssync(输入)){ return '文件夹的项目名称存在。}返回true} }，//其他提示];返回inquirer.prompt(提示);} module.exports=initSetting此时，项目结构如下：

NPM-包-命令行界面|-bin |-命令行界面|-src |-命令。js |-索引。js |-设置。js |-包。数据然后在创作方法内执行initSetting()即可生效。

//src/index。js创建onst init命令=require(' ./command ')；const initSetting=require(' ./setting’)；类创建{ //其他代码do(){ initCommand()；initSetting().然后（设置={ //用户输入完成后，会得到全部输入信息的数据数据设置});}}这里，查询者。提示方法装载好要收集的问题后，返回的是承诺对象。收集完成之后，要在然后方法内拿到配置信息，以便进行下一步模板替换的操作。

4.6 获取用户输入配置信息

模板文件替换，要用到工具mem-fs和mem-fs-编辑器。文件操作，要用到工具谢尔吉斯。

新建src/output.js文件，文件内容如下（删除了部分代码，以下只是示例，完整项目看最后分享链接):

常数粉笔=require('粉笔');const fse=require(' fs-extra ')；const path=require(' path ')；const log=console.log函数输出（创建){返回新的承诺(解析，拒绝)={ //拿到配置信息常量设置=创建。_设置；const { projectName }=设置；//获取当前命令行执行环境所在文件夹const CWD=流程。CWD()；//初始化文件夹path const PROJECt path=path。加入(CWD，项目名称)；const PROJECt resolve=GetPROJECt resolve(项目路径);//新建项目文件夹fse.mkdirSync(项目路径);//复制文件夹creation.copy('src '，项目解析(' src ')；//根据配置信息，替换文件内容creation.copyTpl('package.json ')，projectResolve('package.json ')，设置);//将内存中的文件，输出到硬盘上创造_ MFS。commit(()={ resolve()；});});}模块. exports=output输出方法的作用：

创建一个新的项目文件夹，读出模板文件，根据配置信息进行替换(调用mem-fs-editor的copyTpl方法)。这里最重要的一步是在调用mem-fs-editor的方法后，执行mem-fs-editor的commit方法，将内存中的文件输出到硬盘。

在Creation.do方法中，可以通过调用输出方法来输出新的项目文件。打开src/index.js文件，并向文件内容添加以下方法：

//src/index . js creation onst init command=require('。/command ')；const initSetting=require('。/setting’)；const output=require('。/output’)；类创建{ //其他代码do(){ initCommand()；InitSetting()。然后(设置={//用户输入后，会得到所有输入信息的json数据：设置这个。_设置=对象。分配({}，这个。_设置，设置)；//输出文件输出(这个)。然后(res={//项目输出完成})；});}}

4.7 模板文件替换输出

自动初始化项目的过程无非以下三点：

读取用户配置、读取模板文件、编译模板文件、输出最终文件是这三点的有效集成，连接成一个标准化的流程。

4.8 阶段小结

命令行工具中使用的第三方工具包需要通过- save安装。package.json的表示形式是依赖项字段：

dependencies': { '粉笔' : '^2.4.2'，' commander': '^3.0.0'，' fs-extra': '^8.1.0'，' inquirer': '^6.5.0'，' mem-fs': '^1.1.3'，Mem-fs-editor' :' 6.0.0 '，' shell js ' 3: ' 0 . 8 . 3 ' }，这样其他用户在安装您发布的CLI工具时就会自动安装这些依赖项。

五、发布npm包的注意点

我创建的npm-package-cli是专门用于生成个人npm包项目的cli工具。生成的项目包括以下功能点：

支持TypeScrpt mocha chai的自动测试，测试用例由TypeScript编写，测试覆盖覆盖支持eslint，包括TypeScript的lint check、Git提交规范、Git版本(标准版)的自动标注、通过更新CHANGELOG.md输出的npm包支持各种模块规范(AMD、CMD、CommonJS、ESModule)

命令行界面工具安装方法：

Npm安装-g npm-package-cli开源仓库地址：https://github.com/wall-wxk/npm-package-cli

如果对你有帮助，请给我一颗星，你的星绝对是我的动力~

摘要

以上是用边肖介绍的节点命令行工具实现项目自动初始化的标准流程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！