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 "htmlcode">// 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.jsnodemon
你可能已经注意到,在运行启动命令后,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 "htmlcode">// 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.0ts-loader
我们将用 ts-loader Webpack 插件来编译 TypeScript。
我们需要将 entry 文件的后缀更改为 .ts 并告诉 webpack 它还必须解析 .ts 文件(默认情况下,Webpack仅适用于 .js 文件)。
// webpack.config.js ... const config = { entry: ['./src/main.ts'], mode: env.development "htmlcode">// 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 管道……一切尽在你的掌握之中。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。