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 相关文章推荐
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JS如何把字符串转换成json
Feb 21 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
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的十大要点(上)
2009/02/04 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
Python实现数值积分方式
2019/11/20 Python
python logging 日志的级别调整方式
2020/02/21 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
Java基础面试题
2014/07/19 面试题
自我评价怎么写好呢?
2013/12/05 职场文书
美德好少年主要事迹
2014/01/29 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
开幕式邀请函
2015/01/31 职场文书
自荐信怎么写
2015/03/04 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书