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