命令行创建模版页面教程

命令行创建模版页面教程

一、前言

在日常的业务开发中，我们经常会在不同的项目中，甚至是相同的项目中开发相似的页面。

那小伙伴的基本操作肯定是去翻找旧项目，然后 copy 代码过来改造(浪费时间)。

今天我们就来学习个项目，实现通过一行命令帮你在项目中创建特定的页面代码。

二、准备工作

我们需要将项目推上 npm，才能实现该功能，所以没有 npm 账号的小伙伴提前去创建个 npm 账号。并给这个项目创建一个 git 仓库。

创建一个 git 仓库

在仓库中执行 npm init 给项目一个初始化的 package.json。

并且在 package.json 文件上配上仓库的地址

{
   
  ...

  "repository": {
   
    "url": "https://github.com/xxx/xxx.git"
  }
}

三、创建命令行

先给项目安装个依赖

yarn

or

npm

再增加一个 .gitignore 的文件

node_modules
* lock.json;

1、定义命令头部

首先自定义一个命令行。比如：

我希望通过 -v 能够看到该项目的版本号。

并且通过 cblock add page pageName 来实现创建文件。

那需要先定义 cblock 的名称。

给 package.json 增加一下代码：

{
   
  "bin": {
   
    "cblock": "lib/index.js"
  }
}

即定义 cblock 的头部，当命令行头部为 cblock 的情况下，会默认走到 lib/index.js 的文件下。

2、创建文件入口

通过上面的文件路径，可以知道，我们需要在根目录下创建 lib/index.js 的文件。

#!/usr/bin/env node

require("../bin/index");

很多小伙伴肯定好奇 #!/usr/bin/env node 这行代码是什么意思。

用于指明该脚本文件要使用 node 来执行。

/usr/bin/env 用来告诉用户到 path 目录下去寻找 node。

#!/usr/bin/env node 可以让系统动态的去查找 node，以解决不同机器不同用户设置不一致问题。

该命令必须放在第一行， 否者不会生效。

通过 require("../bin/index"); 的代码也能知道我们还需要在跟目录下创建一个 bin/index.js 的文件。

3、实现 -v 查看版本号

这里我们需要先安装一个 commander 的库。 yarn add commander。

依赖安装完后我们来实现 bin/index.js 的代码

#!/usr/bin/env node

const {
    program } = require("commander");

/**
 *  命令行解析
 */
const commanderAction = (command, type, name) => {
   
  console.log(command, type, name);
};

program
  .version("0.0.1", "-v --version -V")
  .arguments("<command> <type> <name>")
  .action(commanderAction)
  .parse(process.argv);

// 代码解析在下面

好了，编写完最简单的代码我们先发个 npm 包

这里要注意，npm 不能用淘宝源，要切换成 npm 源。

npm publish // 这行命令用来发布共有包

npm publish --access=public // 这行命令用来发布私有包

命令执行完，打开 npm 官网， 输入我们的包名，看看版本是否发布成功。通过下图可以确认的是我们已经成功发布了 npm 包。

4、测试 -v 命令

打开终端键入：

# 全局安装
yarn global add @dlijs/createpage

cblock -v

cblock add page Foo

我们能够获得下图的结果：

5、代码解析

首先我们打开 commanderjs 官网

• program 为 commander 的全局对象。
• version 为设置版本，其默认选项为-V 和 --version，设置了版本后，命令行会输出当前的版本号。
• arguments 用来指定命令行的参数。
• action 执行命令的方法。输入完命令行后，键入回车键能执行 action 下的方法，并且能够将键入的命令行参数带出来。
• .parse(process.argv) 处理参数(理解未必正确)

四、建立本地测试环境

接下来我们要实现业务逻辑，就会需要不停的测试，不停的修正，那我们总不能每次测试都发一次 npm 版本，那样成本太大。所以我们需要建立本地的测试环境。

在我们 createpage 的根目录下键入命令行 yarn link。

功能就是可以进行本地的项目测试。

首先我们先创建一个 alita 或者是 umi 的测试项目。

安装完依赖后在的 demo 的根目录下按顺序键入：

# 这里的项目名称要修改成自己的项目