189 8069 5689
使用TypeScript怎么开发一个Node.js程序？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
站在用户的角度思考问题，与客户深入沟通，找到淇滨网站设计与淇滨网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名注册、网站空间、企业邮箱。业务覆盖淇滨地区。
// 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程序的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！