tags: [组件]
categories: 前端工程化

cli 工具需要满足的需求

1. 获得用户的输入，并且根据相应的输入，可以定制编程相应执行逻辑

2. 模板代码有两种实现思路，一是采用代码生成，二是分离静态资源模板

3. 使用包管理工具

项目需求

• 自动创建组件需要的目录

• 自动添加模版代码

• 添加组件 js 和 css 代码

推荐包

commander

commander.js

commander是目前很成熟的Node命令行交互接口实现工具，使用该工具可以很便捷很快速地实现第一点需求

git-clone

git-clone是一个很轻量的Node编写的git clone封装，可以很便捷很快速地从github上克隆执行项目模板。也就是说，我们将项目模板静态存储在github上，每当执行cli命令时，将其下载，这样我们就很轻松地得到了项目代码模板。另外，当需要改变项目模板代码时，只需要修改github上的项目代码就可以，cli工具无需修改

shelljs

shelljs同样是一个很轻量的Node编写的系统命令封装，可以很便捷很快速地在Node代码中使用系统命令。在本例中，因为从github上下载的项目代码会带有.git文件，需要使用rm命令将其删除

chalk

用于高亮终端打印出来的信息

request

发送http请求的工具

初始化项目

mkdir rc-new
cd rc-new
npm init -y
yarn add react

创建模板文件

React 新建组件的方式有三种：

• 类组件：class.jsx

• 函数组件: functional.jsx

• 纯组件: pure-class.jsx

mkdir src 
cd src
mkdir template
cd template
touch class.jsx functional.jsx pure-class.jsx

// class.jsx
import React, { Component } from 'react';
// COMPONENT_NAME 是占位符
class COMPONENT_NAME extends Component {
  render() {
    return <div />;
  }
}
export default COMPONENT_NAME;

import React from 'react';
const COMPONENT_NAME = () => {
  return <div />;
};
export default COMPONENT_NAME;

import React, { PureComponent } from 'react';
class COMPONENT_NAME extends PureComponent {
  render() {
    return <div />;
  }
}
export default COMPONENT_NAME;

命令行工具

1、package.json 设置入口文件

 "bin": {
    "rc-new": "./src/index.js"
  },

2、在 bin/index.js 顶部声明此文件需要调用 Node.js 执行

#!usr/bin/env/ node

3、命令行交互模块 commander.js

yarn add chalk commander prettier

const program = require('commander')

执行

打开命令行工具，进入当前开发文件夹,输入命令bin/index.js，即可以输出“my first cli”

我们如何像发布后一样，直接输node-cli命令就可以调用我们的主文件呢？

在开发目录执行sudo npm link将模块链接到全局，如想去掉 link，执行sudo npm unlink