TypeScript 项目构建工具 TSBB 使用教程

1. 项目目录结构及介绍

TSBB（TypeScript + Babel）是一个零配置的 TypeScript 项目构建工具，其项目目录结构如下：

tsbb/
├── .github/                # GitHub 相关配置文件
├── .husky/                 # Husky 配置文件，用于 Git 提交钩子
├── examples/               # 示例项目目录
├── packages/               # 项目模块目录
├── test/                   # 测试文件目录
├── .gitignore              # Git 忽略文件
├── .prettierignore         # Prettier 忽略文件
├── .prettierrc             # Prettier 配置文件
├── LICENSE                 # 项目许可证文件
├── README.md               # 项目说明文件
├── lerna.json              # Lerna 配置文件，用于管理多包仓库
├── package.json            # 项目包配置文件
├── renovate.json           # Renovate 配置文件，用于自动更新依赖

每个目录和文件的用途在上面的注释中有简要说明。

2. 项目的启动文件介绍

项目的启动主要是通过 package.json 中的 scripts 字段定义的命令来实现。以下是一些基本的启动命令：

• npm run watch：启动监听模式，当文件变化时自动重新编译。
• npm run build：构建项目，编译 TypeScript 文件。
• npm start：启动项目，通常用于开发环境。

在 package.json 中，scripts 部分可能如下所示：

{
  "scripts": {
    "watch": "tsbb watch",
    "build": "tsbb build",
    "test": "tsbb test"
  }
}

3. 项目的配置文件介绍

TSBB 的配置主要集中在几个关键文件中：

• tsconfig.json：TypeScript 配置文件，定义了 TypeScript 编译器的选项，包括模块系统、目标代码版本、输出目录等。

  {
    "compilerOptions": {
      "module": "commonjs",
      "target": "esnext",
      "outDir": "./lib",
      "strict": true,
      "skipLibCheck": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "**/*.spec.ts"]
  }
  

• .prettierrc：Prettier 配置文件，用于定义代码格式化规则。

  {
    "semi": false,
    "singleQuote": true
  }
  

• package.json：项目的包配置文件，其中包含了项目的名称、版本、依赖、脚本等信息。

以上是 TSBB 项目的目录结构、启动文件和配置文件的简要介绍。使用 TSBB 可以简化 TypeScript 项目的构建和开发流程，提高开发效率。