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
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页