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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
jquery图片切换插件
Mar 16 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
浅谈原型对象的常用开发模式
Jul 22 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 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
Discuz! Passport 通行证整合
2008/03/27 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
YII框架http缓存操作示例
2019/04/29 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
Python格式化字符串f-string概览(小结)
2019/06/18 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
python urllib和urllib3知识点总结
2021/02/08 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
《雕塑之美》教学反思
2014/04/24 职场文书
学籍证明模板
2014/11/21 职场文书
离婚代理词范文
2015/05/23 职场文书
运动会加油稿50字
2015/07/21 职场文书