用 TypeScript 开发 Node.js 程序

翻译：疯狂的技术宅
原文： https://medium.com/@freek_men...

---

本文首发微信公众号：前端先锋
欢迎关注，天天都给你推送新鲜的前端技术文章

---

当我第一次发现 TypeScript 时，就把它用到了本身的 JavaScript 程序中。使用 TypeScript 有不少好处，如今你要让我在用原生 JavaScript 写任何东西的话，须要给我一个使人信服的理由。

在本文中，我将向你展现如何设置一个简单的开发环境，以便使用 TypeScript 编写 Node.js 应用程序。

---

首先在 TypeScript 中可能有一千种或更多种不一样的方法去建立 Node.js 程序。我只是想展现本身喜欢的方式。

另外你能够在此处找到个人入门项目：https://github.com/toxsickcod...。里面有一些不会在本文中讨论的额外功能。

Package.json

就像我以前说过的，有不少方法能够作到这一点。我喜欢将 Webpack 用于 TypeScript 项目。但首先要作的是从建立一个 package.json 开始。

你能够用 npm init 命令生成 package.json，也能够复制粘贴下面的代码并进行更改。

// package.json
{
  "name": "node-typescript",
  "version": "0.0.1",
  "author": "Freek Mencke",
  "homepage": "https://medium.com/@freek_mencke",
  "license": "MIT",
  "scripts": {},
  "dependencies": {},
  "devDependencies": {}
}

让咱们从 JavaScript Node.js 项目的简单 Webpack 配置开始。完成基本设置后，将添加 TypeScript。

程序

如前所述，咱们将从 JavaScript 程序开始，稍后将其转换为 TypeScript。首先建立一个带有 main.js 和 information-logger.js 文件的 src/ 目录，其中包含一些 Node.js 功能：

// src/information-logger.js
const os = require('os');
const { name, version} = require('../package.json');
module.exports = {
  logApplicationInformation: () =>
    console.log({
      application: {
        name,
        version,
      },
    }),
  logSystemInformation: () =>
    console.log({
      system: {
        platform: process.platform,
        cpus: os.cpus().length,
      },
    }),
};
// src/main.js
const informationLogger = require('./information-logger');
informationLogger.logApplicationInformation();
informationLogger.logSystemInformation();

这段脚本会将一些系统信息输出到控制台。运行 node main.js 后，能够看到如下输出：

{ application: { name: 'node-typescript', version: '0.0.1' } }
{ system: { platform: 'linux', cpus: 8 } }

Webpack

在使用 Webpack 以前，须要作的第一件事就是安装必要的依赖项。不要忘记使用 -D 标志，它表明 devDependencies。

npm i -D webpack webpack-cli

你可能注意到我没有安装 webpack-dev-server 。这由于咱们正在建立一个 Node.js 应用程序。后面我会使用 nodemon，它有相同的用途。

webpack.config.js

下一步是建立一个 webpack.config.js 文件，经过它告诉 Webpack 应该如何处理咱们的代码。

// webpack.config.js
'use strict';
module.exports = (env = {}) => {
  const config = {
    entry: ['./src/main.js'],
    mode: env.development ? 'development' : 'production',
    target: 'node',
    devtool: env.development ? 'cheap-eval-source-map' : false,
  };
  return config;
};

如你所见，从 Webpack 开始并不须要太多配置。惟一须要的两个选项是 entry 和 target。咱们用 entry 字段声明程序的入口点，告诉 Webpack 在 Node.js 中使用 target 字段。

能够用 mode 字段告诉 Webpack 它应该关注编译速度（开发）仍是混淆和缩小（生产）。为了帮助调试，须要在开发模式中运行，用 devtool 字段来指示咱们想要源映射。这样，若是出现错误，能够很容易地在代码中找到它出现的位置。

要使用 Webpack，须要建立一些 npm 命令：

// package.json
...  
  "scripts": {
    "start": "webpack --progress --env.development",
    "start:prod": "webpack --progress"
  },
...

如今能够经过运行这些命令来构建程序。它将建立一个目录 dist/，其中包含输出文件 main.js 。能够用 webpack.config.js 中的 output configuration 指定一个不一样的名称。

咱们的项目如今应该是这样的：

dist/
  main.js
node_modules/
src/
  information_logger.js
  main.js
package-lock.json
package.json
webpack.config.js

nodemon

你可能已经注意到，在运行启动命令后，Webpack 会在构建应用程序后中止。它不会监视咱们对的文件所所作的改动。因为咱们正在使用 Node.js，因此没法用 webpack-dev-server。

幸运的是能够用 nodemon 来解决这个问题。它是专门为这个目的而开发的工具：在开发期间从新启动 Node.js 应用程序。

让咱们从安装 nodemon-webpack-plugin开始。不要忘记 -D 标志，由于它是一个 devDependency。

npm i -D nodemon-webpack-plugin

让咱们建立一个新的 nodemon 标志，并将插件添加到的 webpack.config.js 中。

// webpack.config.js
'use strict';
const NodemonPlugin = require('nodemon-webpack-plugin');
module.exports = (env = {}) => {
  const config = {
    entry: ['./src/main.js'],
    mode: env.development ? 'development' : 'production',
    target: 'node',
    devtool: env.development ? 'cheap-eval-source-map' : false,  
    resolve: { // tells Webpack what files to watch.
      modules: ['node_modules', 'src', 'package.json'],
    },   
    plugins: [] // required for config.plugins.push(...);
  };
  if (env.nodemon) {
    config.watch = true;
    config.plugins.push(new NodemonPlugin());
  }
  return config;
};

当咱们传递 nodemon 标志时，须要设置 Webpack watch config，并添加 nodemon 插件。当咱们更改文件时，Webpack watch config 将会重建程序。 nodemon 插件会在重建完成后从新启动程序。

咱们还须要更新 npm 命令。我还建立了一些没有 nodemon标志的构建命令，。

// package.json
...
  scripts: [
    "start": "webpack --progress --env.development --env.nodemon",
    "start:prod": "webpack --progress --env.nodemon",
    "build": "webpack --progress --env.development",
    "build:prod": "webpack --progress",
    "build:ci": "webpack"
  ],
...

咱们完成了 Node.js 程序的基本 Webpack 设置。下一步是添加 TypeScript！

TypeScript

如今让咱们添加 TypeScript！首先安装须要的依赖项。

因为这是一个 Node.js 项目，咱们还须要安装相关的支持。我正在研究 Node.js 的 LTS 版本，也就是10 版。这就是我安装 ^ 10.0.0 版的缘由。

npm i -D typescript ts-loader @types/node@^10.0.0

ts-loader

咱们将用 ts-loader Webpack 插件来编译 TypeScript。

咱们须要将 entry 文件的后缀更改成 .ts 并告诉 webpack 它还必须解析 .ts 文件（默认状况下，Webpack仅适用于 .js 文件）。

// webpack.config.js
...
  const config = {
    entry: ['./src/main.ts'],
    mode: env.development ? 'development' : 'production',
    target: 'node',
    devtool: env.development ? 'cheap-eval-source-map' : false,
    resolve: {
      // Tells Webpack what files to watch      
      extensions: ['.ts', '.js'],
      modules: ['node_modules', 'src', 'package.json'],
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
        },
      ],
    },
    plugins: [], // Required for config.plugins.push(...);
  };
...

tsconfig.json

若是如今尝试运行咱们的程序，它将会崩溃。由于还缺乏 tsconfig.json 文件。因此先建立一个。

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["dom", "es2018"],
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "removeComments": true,    
    "resolveJsonModule": true,
    "strict": true,
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*.ts"]
}

如上所示，我更喜欢严格的 tsconfig 文件，你能够没必要这样作。我喜欢把本身的目标代码语法版本设定的很高（ esnext 或 es2018），由于 Node.js 对新的 JavaScript 功能支持的很是好。

程序

咱们仍然须要将 JavaScript 文件的扩展名从 .js 改成.ts。让咱们这样作并尝试运行项目。

运行项目后，能够当即看到咱们在建立的测试应用程序中犯了“错误”。咱们没法对 package.json 中的 name 字段进行解构，由于它可能已经被定义了或者咱们覆盖了它。因此须要作一些改动。

// information-logger.ts
import os from 'os';
import { name, version } from '../package.json';
export class InformationLogger {
  static logApplicationInformation(): void {
    console.log({
      application: {
        name,
        version,
      },
    });
  }
  static logSystemInformation(): void {
    console.log({
      system: {
        platform: process.platform,
        cpus: os.cpus().length,
      },
    });
  }
}
// main.ts
import { InformationLogger } from './information-logger';
InformationLogger.logApplicationInformation();
InformationLogger.logSystemInformation();

若是你遵循了前面全部步骤，那么如今项目结构应该是这样的：

dist/
  main.js
node_modules/
src/
  information-logger.ts
  main.ts
package-lock.json
package.json
tsconfig.json
webpack.config.js

咱们已准备好用 TypeScript 编写 Node.js 程序了！

最后的注意事项

我确信在 TypeScript 中有数千种不一样的方法来编写 Node.js 应用程序。我所写下的毫不是你必需要照样作的方式，这只是你能够作到的方式中的一种。

剩下来的步骤多是添加 TSLint 集成，添加 Dockerfile，设置 CI 管道……一切尽在你的掌握之中。

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

---

欢迎继续阅读本专栏其它高赞文章：

• 12个使人惊叹的CSS实验项目
• 必需要会的 50 个React 面试题
• 世界顶级公司的前端面试都问些什么
• 11 个最好的 JavaScript 动态效果库
• CSS Flexbox 可视化手册
• 从设计者的角度看 React
• 过节很无聊？仍是用 JavaScript 写一个脑力小游戏吧！
• CSS粘性定位是怎样工做的
• 一步步教你用HTML5 SVG实现动画效果
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程彻底指南
• 把HTML转成PDF的4个方案及实现