点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

TypeScript开发Node.js程序的方法

来源：动视网责编：小采时间：2020-11-27 21:57:57

TypeScript开发Node.js程序的方法

TypeScript开发Node.js程序的方法:当我第一次发现 TypeScript 时，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好处，现在你要让我在用原生 JavaScript 写任何东西的话，需要给我一个令人信服的理由。在本文中，我将向你展示如何设置一个简单的开发环境，以便使用 Typ

推荐度：

点击下载本文 文档为doc格式

导读TypeScript开发Node.js程序的方法:当我第一次发现 TypeScript 时，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好处，现在你要让我在用原生 JavaScript 写任何东西的话，需要给我一个令人信服的理由。在本文中，我将向你展示如何设置一个简单的开发环境，以便使用 Typ

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

TypeScript开发Node.js程序的方法

推荐度：

点击下载本文 文档为doc格式

标签：方法的方法开发

热门焦点

TypeScript开发Node.js程序的方法

TypeScript开发Node.js程序的方法

TypeScript开发Node.js程序的方法

最新推荐

猜你喜欢

热门推荐