经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Node.js » 查看文章
TypeScript开发Node.js程序的方法
来源：jb51　　时间：2019/4/30 12:16:02　　对本文有异议

当我第一次发现 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，也可以复制粘贴下面的代码并进行更改。

  1. // package.json
  2. {
  3.  "name": "node-typescript",
  4.  "version": "0.0.1",
  5.  "author": "Freek Mencke",
  6.  "homepage": "https://medium.com/@freek_mencke",
  7.  "license": "MIT",
  8.  "scripts": {},
  9.  "dependencies": {},
  10.  "devDependencies": {}
  11. }

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

程序

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

  1. // src/information-logger.js
  2. const os = require('os');
  3. const { name, version} = require('../package.json');
  4. module.exports = {
  5.  logApplicationInformation: () =>
  6.   console.log({
  7.    application: {
  8.     name,
  9.     version,
  10.    },
  11.   }),
  12.  logSystemInformation: () =>
  13.   console.log({
  14.    system: {
  15.     platform: process.platform,
  16.     cpus: os.cpus().length,
  17.    },
  18.   }),
  19. };
  20. // src/main.js
  21. const informationLogger = require('./information-logger');
  22. informationLogger.logApplicationInformation();
  23. informationLogger.logSystemInformation();

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

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

Webpack

在使用 Webpack 之前，需要做的第一件事就是安装必要的依赖项。不要忘记使用 -D 标志，它代表 devDependencies。

  1. npm i -D webpack webpack-cli

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

webpack.config.js

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

  1. // webpack.config.js
  2. 'use strict';
  3. module.exports = (env = {}) => {
  4.  const config = {
  5.   entry: ['./src/main.js'],
  6.   mode: env.development ? 'development' : 'production',
  7.   target: 'node',
  8.   devtool: env.development ? 'cheap-eval-source-map' : false,
  9.  };
  10.  return config;
  11. };

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

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

要使用 Webpack，需要创建一些 npm 命令：

  1. // package.json
  2. ... 
  3.  "scripts": {
  4.   "start": "webpack --progress --env.development",
  5.   "start:prod": "webpack --progress"
  6.  },
  7. ...

现在可以通过运行这些命令来构建程序。它将创建一个目录 dist/，其中包含输出文件 main.js 。可以用 webpack.config.js 中的 output configuration 指定一个不同的名称。

我们的项目现在应该是这样的：

  1. dist/
  2.  main.js
  3. node_modules/
  4. src/
  5.  information_logger.js
  6.  main.js
  7. package-lock.json
  8. package.json
  9. webpack.config.js

nodemon

你可能已经注意到，在运行启动命令后，Webpack 会在构建应用程序后停止。它不会监视我们对的文件所所做的改动。由于我们正在使用 Node.js，所以无法用 webpack-dev-server。

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

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

  1. npm i -D nodemon-webpack-plugin

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

  1. // webpack.config.js
  2. 'use strict';
  3. const NodemonPlugin = require('nodemon-webpack-plugin');
  4. module.exports = (env = {}) => {
  5.  const config = {
  6.   entry: ['./src/main.js'],
  7.   mode: env.development ? 'development' : 'production',
  8.   target: 'node',
  9.   devtool: env.development ? 'cheap-eval-source-map' : false, 
  10.   resolve: { // tells Webpack what files to watch.
  11.    modules: ['node_modules', 'src', 'package.json'],
  12.   },  
  13.   plugins: [] // required for config.plugins.push(...);
  14.  };
  15.  if (env.nodemon) {
  16.   config.watch = true;
  17.   config.plugins.push(new NodemonPlugin());
  18.  }
  19.  return config;
  20. };

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

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

  1. // package.json
  2. ...
  3.  scripts: [
  4.   "start": "webpack --progress --env.development --env.nodemon",
  5.   "start:prod": "webpack --progress --env.nodemon",
  6.   "build": "webpack --progress --env.development",
  7.   "build:prod": "webpack --progress",
  8.   "build:ci": "webpack"
  9.  ],
  10. ...

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

TypeScript

现在让我们添加 TypeScript！首先安装需要的依赖项。

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

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

ts-loader

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

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

  1. // webpack.config.js
  2. ...
  3.  const config = {
  4.   entry: ['./src/main.ts'],
  5.   mode: env.development ? 'development' : 'production',
  6.   target: 'node',
  7.   devtool: env.development ? 'cheap-eval-source-map' : false,
  8.   resolve: {
  9.    // Tells Webpack what files to watch   
  10.    extensions: ['.ts', '.js'],
  11.    modules: ['node_modules', 'src', 'package.json'],
  12.   },
  13.   module: {
  14.    rules: [
  15.     {
  16.      test: /\.ts$/,
  17.      use: 'ts-loader',
  18.     },
  19.    ],
  20.   },
  21.   plugins: [], // Required for config.plugins.push(...);
  22.  };
  23. ...

tsconfig.json

如果现在尝试运行我们的程序，它将会崩溃。因为还缺少 tsconfig.json 文件。所以先创建一个。

  1. // tsconfig.json
  2. {
  3.  "compilerOptions": {
  4.   "target": "esnext",
  5.   "module": "esnext",
  6.   "moduleResolution": "node",
  7.   "lib": ["dom", "es2018"],
  8.   "allowSyntheticDefaultImports": true,
  9.   "noImplicitAny": true,
  10.   "noUnusedLocals": true,
  11.   "removeComments": true,  
  12.   "resolveJsonModule": true,
  13.   "strict": true,
  14.   "typeRoots": ["node_modules/@types"]
  15.  },
  16.  "exclude": ["node_modules"],
  17.  "include": ["src/**/*.ts"]
  18. }

如上所示，我更喜欢严格的 tsconfig 文件，你可以不必这样做。我喜欢把自己的目标代码语法版本设定的很高（ esnext 或 es2018），因为 Node.js 对新的 JavaScript 功能支持的非常好。

程序

我们仍然需要将 JavaScript 文件的扩展名从 .js 改为.ts。让我们这样做并尝试运行项目。

运行项目后，可以立即看到我们在创建的测试应用程序中犯了“错误”。我们无法对 package.json 中的 name 字段进行解构，因为它可能已经被定义了或者我们覆盖了它。所以需要做一些改动。

  1. // information-logger.ts
  2. import os from 'os';
  3. import { name, version } from '../package.json';
  4. export class InformationLogger {
  5.  static logApplicationInformation(): void {
  6.   console.log({
  7.    application: {
  8.     name,
  9.     version,
  10.    },
  11.   });
  12.  }
  13.  static logSystemInformation(): void {
  14.   console.log({
  15.    system: {
  16.     platform: process.platform,
  17.     cpus: os.cpus().length,
  18.    },
  19.   });
  20.  }
  21. }
  22. // main.ts
  23. import { InformationLogger } from './information-logger';
  24. InformationLogger.logApplicationInformation();
  25. InformationLogger.logSystemInformation();

如果你遵循了前面所有步骤，那么现在项目结构应该是这样的：

  1. dist/
  2.  main.js
  3. node_modules/
  4. src/
  5.  information-logger.ts
  6.  main.ts
  7. package-lock.json
  8. package.json
  9. tsconfig.json
  10. webpack.config.js

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

最后的注意事项

我确信在 TypeScript 中有数千种不同的方法来编写 Node.js 应用程序。我所写下的绝不是你必须要照样做的方式，这只是你可以做到的方式中的一种。

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

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Node.js热门文章

  • node.js学习笔记之koa框架和简单爬虫练习
  • node版本管理工具n包使用教程详解
  • 一文教会你从Windows中完全删除node.js
  • AntvG6-graph图谱工具
  • node.js express框架实现文件上传与下载功能实例详解
  • Node.js 串口通讯 node-serialport
  • NodeJS实现图片文本分割
  • nodejs fastdfs
  • nodejs实现UDP组播示例方法
  • express框架中使用jwt实现验证的方法

    • Node.js推荐文章

  • AntvG6-graph图谱工具
  • 一篇文章搞定什么是nodeJs它和NPM关系与应用
  • Node + Express 后台开发 —— 上传、下载和发布
  • Node.js躬行记（28）——Cypress自动化测试实践
  • NodeJS 实战系列：个人开发者应该如何选购云服务
  • NodeJS V8引擎的内存和垃圾回收器（GC）
  • 【ASP.NET Core】在node.js上托管Blazor WebAssembly应用
  • Node.js 未来发展趋势
  • 从零开始，打造属于你的 ChatGPT 机器人！
  • Node.js躬行记（25）——Web自动化测试

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号