TypeScript + NodeJs 编写一个 React 脚手架工具

{
  "compilerOptions": {
    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "outDir": "./lib" /* 输出目录 */,
    "strict": true /* 启用所有严格类型检查选项。 */,
    "baseUrl": "./" /* 解析非绝对模块名称的基目录。 */,
    /* 路径别名，主要针对于ts才有效果 */
    "paths": {
      "@/*": ["src/*"]
    },
    "esModuleInterop": true /* 通过为所有导入创建命名空间对象，实现CommonJS和ES模块之间的互操作性。意味着“allowSyntheticDefaultImports”。 */,
    "experimentalDecorators": true /* 启用对ES7装饰器的实验性支持。 */,
    "forceConsistentCasingInFileNames": true /* 不允许对同一文件进行大小写不一致的引用。 */,
    "resolveJsonModule": true /* 允许导入JSON文件 */
  }
}

初始化 package.json 文件

npm init

安装依赖插件

npm i -S commander inquirer chalk download-git-repo execa handlebars log-symbols module-alias ora

npm i -D @types/node

主要插件
- commander：一个命令行框架，用来解析用户命令行输入和参数；例如：rcm -v。
- inquirer：一个交互式命令行工具；例如：input 输入，confirm 确认等等。
修饰插件
- chalk：给终端的字体加上颜色，显得更加炫酷。
- download-git-repo：下载并提取 Git 仓库，主要用来下载项目模板。
- execa：NodeJs 运行 shell 命令，主要用来安装插件。
- handlebars：一个模板引擎，用来将用户提交的信息动态填充到文件中。主要用来下载模板之后，修改 package.json 文件。
- log-symbols：在终端上显示出 √ 或 × 等的图标。
- module-alias：用来取别名，主要是 JS 中加载。
- ora：在终端上显示一些小图标，显示下载中的动画效果。
- @types/node：在 TS 中识别 NodeJs。
package.json

json

{
  "name": "react-cli-mine",
  "version": "1.0.0",
  "private": false,
  "description": "This is a simple cli about react!",
  "main": "src/index.ts",
  "bin": {
    "rcm": "bin/react-cli-mine.js"
  },
  "scripts": {
    "start": "start cmd /k && npm run dev",
    "dev": "tsc -p tsconfig.json -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["React", "Cli", "TypeScript", "ES6+"],
  "repository": {
    "type": "git",
    "url": "https://github.com/biaov/react-cli-mine.git"
  },
  "author": "biaov <biaov@qq.vom>",
  "license": "ISC",
  "dependencies": {
    "chalk": "^4.1.0",
    "commander": "^6.0.0",
    "download-git-repo": "^3.0.2",
    "execa": "^4.0.3",
    "handlebars": "^4.7.6",
    "inquirer": "^7.3.3",
    "log-symbols": "^4.0.0",
    "module-alias": "^2.2.2",
    "ora": "^4.0.5"
  },
  "devDependencies": {
    "@types/node": "^14.0.27"
  }
}

编写一个简单的命令

编写 -v,--version。
因为已经存在 version 属性了，所以我们只能使用它提供的 API 修改默认值。

import { program } from 'commander'
import { version } from '@/../package.json' // 引入版本号，这样每次更新的时候只要修改package.json文件即可，降低维护成本

program.version(version, '-v, --version', '输出版本号') // options 重写
program.parse(process.argv) // 处理参数

本地测试

npm link

rcm -v

在这里插入图片描述

更多的命令你可以自己完善了，也可以参考我的react-cli-mine。
至于如何发布到NPM 库，这里说一下大概流程，就不做详细讲解了。

发布大概流程

必须要有一个NPM 库账号，你可以去注册一个。
有了账号之后，你就在本地 shell 命令中登录一下。

npm login

在这里插入图片描述

运行发布命令

npm publish

注意：
- 发布的时候，package.json 文件里的 private 属性要写上 false，表示不是私有的。不然发布不了。
- 每次的发布版本要比上一次的要高，最低的初始版本可以是 0.0.1。

TypeScript + NodeJs 编写一个 React 脚手架工具 ​

目录 ​

初始化 TypeScript 配置 ​

初始化 package.json 文件 ​

安装依赖插件 ​

编写一个简单的命令 ​

本地测试 ​

发布大概流程 ​

TypeScript + NodeJs 编写一个 React 脚手架工具

目录

初始化 TypeScript 配置

初始化 package.json 文件

安装依赖插件

编写一个简单的命令

本地测试

发布大概流程