TypeScript开发Node.js程序的方法

更新时间：2019年04月30日 09:13:09 作者：疯狂的技术宅

这篇文章主要介绍了TypeScript开发Node.js程序的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

当我第一次发现 TypeScript 时，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好处，现在你要让我在用原生 JavaScript 写任何东西的话，需要给我一个令人信服的理由。

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

首先在 TypeScript 中可能有一千种或更多种不同的方法去创建 Node.js 程序。我只是想展示自己喜欢的方式。

另外你可以在此处找到我的入门项目：https://github.com/toxsickcoder/node-typescript-starter。里面有一些不会在本文中讨论的额外功能。

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 管道……一切尽在你的掌握之中。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解node child_process模块学习笔记
这篇文章主要介绍了详解node child_process模块学习笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
express框架实现基于Websocket建立的简易聊天室
本篇文章主要介绍了express框架实现基于Websocket建立的简易聊天室，具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
使用nodejs中httpProxy代理时候出现404异常的解决方法
下面小编就为大家带来一篇使用nodejs中httpProxy代理时候出现404异常的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
对node.js中render和send的用法详解
今天小编就为大家分享一篇对node.js中render和send的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-05-05
node.js中 stream使用教程
Stream 是一个抽象接口，Node 中有很多对象实现了这个接口。例如，对http 服务器发起请求的request 对象就是一个 Stream，还有stdout（标准输出）。
2016-08-08
npm使用国内淘宝镜像的两种方法
npm install时候,默认是去npm镜像源获取,很多时候蜗牛一样的速度,所以需要将安装源设置成国内的源,这样速度就会快很多,本文就来介绍一下npm使用国内淘宝镜像的两种方法,感兴趣的可以了解一下
2023-08-08
Node搭建https服务器实例详解
这篇文章主要介绍了Node搭建https服务器的方法,结合实例形式详细分析了创建ssl证书以及node.js调用https模块搭建https服务器的相关操作技巧,需要的朋友可以参考下
2023-04-04
node koa2实现上传图片并且同步上传到七牛云存储
这篇文章主要介绍了node koa2实现上传图片并且同步上传到七牛云存储，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
浅谈Node新版本13.2.0正式支持ES Modules特性
这篇文章主要介绍了浅谈Node新版本13.2.0正式支持ES Modules特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
编译打包nodejs服务代码如何部署到服务器
这篇文章主要介绍了编译打包nodejs服务代码如何部署到服务器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10

TypeScript开发Node.js程序的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具