35 使用TypeScript构建项目 🛠️之构建脚本与工具链

在上一章中，我们讨论了如何使用 npm 管理项目中的依赖。现在，让我们继续深入，了解如何通过构建脚本和工具链来提高我们的 TypeScript 项目开发效率。构建脚本和工具链的设置可以帮助我们自动化一些常见任务，提升开发体验。

1. 为什么需要构建脚本和工具链？

构建脚本和工具链的使用可以大大简化项目的开发与部署流程。以下是一些主要的原因：

• 自动化任务：例如，编译 TypeScript 代码、运行测试、打包项目等。
• 一致性：确保每个开发者的环境都能以相同的方式构建和运行项目。
• 简化命令：将复杂的命令组合成简单的 npm 脚本。

2. 设置构建脚本

首先，我们需要定义一些基本的构建脚本。在项目的 package.json 文件中，我们可以添加一个 scripts 字段。默认情况下，您的 package.json 看起来可能是这样的：

{
  "name": "my-typescript-project",
  "version": "1.0.0",
  "scripts": {},
  "dependencies": {},
  "devDependencies": {}
}

假设我们的 TypeScript 文件位于 src 目录，并希望将编译后的文件输出到 dist 目录。我们可以在 scripts 中添加以下命令：

"scripts": {
  "build": "tsc",
  "watch": "tsc --watch",
  "test": "jest"
}

解释：

• build：运行 tsc 命令编译 TypeScript 文件到 dist 目录。
• watch：在源文件发生变化时自动重新编译代码。
• test：运行测试。

要运行构建脚本，只需在终端中输入：

npm run build

3. 使用工具链

除了基本的构建脚本，使用一些工具链可以帮助我们进一步优化开发流程。

3.1 TypeScript 校验

我们可以使用 tslint 或者 eslint 来进行代码质量检查。推荐使用 eslint，并通过其 typescript-eslint 插件支持 TypeScript 文件。

安装依赖：

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

在项目根目录创建 .eslintrc.js 文件：

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'plugin:@typescript-eslint/recommended',
    ],
    rules: {
        // 自定义规则
    },
};

添加 ESLint 脚本：

"lint": "eslint 'src/**/*.{ts,tsx}'"

3.2 测试工具

假设我们选择使用 Jest 作为测试框架。在项目中安装 jest 和 ts-jest：

npm install --save-dev jest ts-jest @types/jest

然后，在项目根目录创建 jest.config.js：

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node',
};

在 package.json 的 scripts 中添加测试命令：

"scripts": {
    "test": "jest"
}

3.3 打包工具

若要将项目打包为可在生产环境中使用的格式，我们可以使用 webpack。以下是如何设置 webpack 的步骤：

安装依赖：

npm install --save-dev webpack webpack-cli ts-loader

在项目根目录创建一个 webpack.config.js 文件，配置如下：

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
};

在 package.json 中添加打包脚本：

"build": "webpack"

然后，使用以下命令打包项目：

npm run build

4. 示例项目

假设我们有一个简单的 TypeScript 项目结构如下：

my-typescript-project/
├── src/
│   ├── index.ts
└── package.json

index.ts 内容如下：

const message: string = 'Hello, TypeScript!';
console.log(message);

通过设置上述构建脚本和工具链，可以方便地构建、测试和打包我们的项目。

5. 小结

通过构建脚本和工具链的设置，我们可以实现代码的自动化构建、质量检测和打包。在后续章节中，我们将探讨常见的项目模板，帮助我们快速启动项目。希望这些内容能够帮助你更好地使用 TypeScript 进行项目开发。