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

• 搭建一个适合项目的脚手架有时候还是有必要的，除了增加你的技术以外，还可以在开发项目时更快的初始化。
• 今天就分享一下如何使用TypeScript+NodeJs编写一个React脚手架工具，不是很难，因为都是踩在巨人的肩膀上。

初始化 TypeScript 配置

• 初始化 TypeScript 项目并创建 tsconfig.json 文件。

tsc --init

• 修改 tsconfig.json 配置文件。

{
  "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

{
  "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); // 处理参数

本地测试

• 在你的项目更目录运行 shell 命令。

npm link

rcm -v

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

发布大概流程

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

npm login

• 运行发布命令

npm publish

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