TypeScript开发Node.js程序的方法


Posted in Javascript onApril 30, 2019

当我第一次发现 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 ? '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 管道……一切尽在你的掌握之中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
jquery实现下载图片功能
Jul 18 jQuery
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 #Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 #Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 #Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 #Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 #Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 #Javascript
详解JS实现系统登录页的登录和验证
Apr 29 #Javascript
You might like
PHP可变函数的使用详解
2013/06/14 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Python绘制动态水球图过程详解
2020/06/03 Python
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
幼儿园六一主持词开场白
2015/05/28 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js