「译」使用Yarn，TypeScript，esbuild，React和Express创建Web应用程序（第3部分）

576次阅读  |  发布于2年以前

这是一个如何使用 Yarn、TypeScript、esbuild、React和Express快速构建web应用的系列教程第3篇。

本文将指导您使用Yarn包管理器、TypeScript、esbuild，Express和React来构建基本的Web应用程序。在文章的结束部分，您将拥有一个可完全构建和部署的Web应用程序。

  1. [项目配置（第1部分） ]

2 . [添加代码（第2部分）]

3 . 构建应用程序（第3部分）

a. Bundlers

b. 构建

c. 服务

d. 概括总结

e. 下一步是什么?

4 . 更进一步（高级篇）

https://github.com/halftheopposite/tutorial-app 查看代码库。

本章节主要实现用于构建和启动应用程序所需要的脚本文件。

Bundlers

要将我们的TypeScript代码转换为可解释的JavaScript，并将所有外部库编译到一个文件中，我们将使用一些转换工具。JS / TS生态系统中有很多包构建器，例如WebPack，Parcel或Rollup，但我们将选择的是esbuild。与其他esbuild包构建工具相比，默认情况下具有许多功能（TypeScript，React）加载，并且具有巨大的性能提升（快一百倍）。如果您有兴趣了解更多信息，请花些时间阅读作者的常见问题解答。

https://esbuild.github.io/faq/#benchmark-details

需要安装 esbuild 和 ts-node 两个依赖包。

从项目的根目录运行:

yarn add -D -W esbuild ts-node

package.json

{
  "name": "my-app",
  "version": "1.0",
  "license": "UNLICENSED",
  "private": true,
  "workspaces": ["packages/*"],
  "devDependencies": {
    "esbuild": "^0.9.6",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.3"
  },
  "scripts": {
    "app": "yarn workspace @my-app/app",
    "common": "yarn workspace @my-app/common",
    "server": "yarn workspace @my-app/server"
  }
}

构建

现在，我们拥有构建应用程序所需的所有工具，因此让我们创建第一个脚本。

首先创建一个scripts/在项目根目录下命名的新文件夹。

我们的脚本将用TypeScript编写并ts-node从命令行执行。尽管存在CLI esbuild，但如果要传递更复杂的参数或将多个工作流程组合在一起，则可以通过JS或TS使用该库。

在build.ts文件scripts/夹中创建一个文件，并在下面添加代码（我将通过注释解释代码的作用）：

scripts/build.ts

import { build } from 'esbuild';

/**
 * Generic options passed during build.
 */
interface BuildOptions {
  env: 'production' | 'development';
}

/**
 * A builder function for the app package.
 */
export async function buildApp(options: BuildOptions) {
  const { env } = options;

  await build({
    entryPoints: ['packages/app/src/index.tsx'], // We read the React application from this entrypoint
    outfile: 'packages/app/public/script.js', // We output a single file in the public/ folder (remember that the "script.js" is used inside our HTML page)
    define: {
      'process.env.NODE_ENV': `"${env}"`, // We need to define the Node.js environment in which the app is built
    },
    bundle: true,
    minify: env === 'production',
    sourcemap: env === 'development',
  });
}

/**
 * A builder function for the server package.
 */
export async function buildServer(options: BuildOptions) {
  const { env } = options;

  await build({
    entryPoints: ['packages/server/src/index.ts'],
    outfile: 'packages/server/dist/index.js',
    define: {
      'process.env.NODE_ENV': `"${env}"`,
    },
    external: ['express'], // Some libraries have to be marked as external
    platform: 'node', // When building for node we need to setup the environement for it
    target: 'node14.15.5',
    bundle: true,
    minify: env === 'production',
    sourcemap: env === 'development',
  });
}

/**
 * A builder function for all packages.
 */
async function buildAll() {
  await Promise.all([
    buildApp({
      env: 'production',
    }),
    buildServer({
      env: 'production',
    }),
  ]);
}

// This method is executed when we run the script from the terminal with ts-node
buildAll();

该代码是不言自明的，但是如果您觉得遗漏了一些内容，可以查看esbuild的API文档以获取完整的关键字列表。

我们的构建脚本现已完成！我们需要做的最后一件事是向我们添加一个新命令，package.json以方便地运行构建操作。

{
  "name": "my-app",
  "version": "1.0",
  "license": "UNLICENSED",
  "private": true,
  "workspaces": ["packages/*"],
  "devDependencies": {
    "esbuild": "^0.9.6",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.3"
  },
  "scripts": {
    "app": "yarn workspace @my-app/app",
    "common": "yarn workspace @my-app/common",
    "server": "yarn workspace @my-app/server",
    "build": "ts-node ./scripts/build.ts" // Add this line here
  }
}

现在yarn build，您可以在每次对项目进行更改时从项目的根文件夹运行以启动构建过程（我们将在另一篇文章中看到如何添加热重载）。

结构提醒：

my-app/
├─ packages/
├─ scripts/
│  ├─ build.ts
├─ package.json
├─ tsconfig.json

server

我们的应用程序已经构建好并可以提供给全世界使用，我们只需要向我们的命令添加最后一条命令即可package.json：

{
  "name": "my-app",
  "version": "1.0",
  "license": "UNLICENSED",
  "private": true,
  "workspaces": ["packages/*"],
  "devDependencies": {
    "esbuild": "^0.9.6",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.3"
  },
  "scripts": {
    "app": "yarn workspace @my-app/app",
    "common": "yarn workspace @my-app/common",
    "server": "yarn workspace @my-app/server",
    "build": "ts-node ./scripts/build.ts",
    "serve": "node ./packages/server/dist/index.js" // Add this line here
  }
}

由于我们现在正在处理纯JavaScript，因此可以使用node二进制文件来启动服务器。因此，继续运行yarn serve。

如果您查看控制台，将会看到服务器正在成功侦听。您还可以打开Web浏览器并导航到http://localhost:3000以显示功能性的React应用程序！

如果你想在运行时更改端口，您可以启动serve通过使用环境变量前缀其命令：PORT=4000 yarn serve。

概括

如果您已经阅读了本文，那么祝贺您完成现代Web应用程序！如果您对此文章系列仍有疑问或反馈，请随时与我们联系。

下一步是什么？

我们将在附录中探讨一些事情：

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8