手把手教你使用TypeScript开发Node.js应用


Posted in Javascript onMay 06, 2019

为什么要使用TypeScript?

为了减少代码编写过程中出现的错误,以及更好的维护你的项目,本文将手把手教你配置一个简单的开发环境来编写Node.js的应用程序,创建这样的一个开发环境有很多方式,这只是其中一种,希望对你有所帮助!

手把手教你使用TypeScript开发Node.js应用

手把手教你使用TypeScript开发Node.js应用

首先配置package.json

因为要在项目中使用Webpack,所以首先得创建一个package.json文件,我们可以使用npm init来生成

{ 
 "name": "start", 
 "version": "1.0.0", 
 "description": "", 
 "main": "index.js", 
 "scripts": { 
 "test": "echo "Error: no test specified" && exit 1" 
 }, 
 "author": "", 
 "license": "ISC" 
}

后面用到其他的在添加

开始

我们在项目的根目录创建一个src目录,添加一个main.js和information-logger.js文件,我们先使用Javascript来创建:

// 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(先到src目录下),打印了我的笔记本电脑的信息

手把手教你使用TypeScript开发Node.js应用

Webpack

首先第一件事就是要配置Webpack的依赖项,记得用下面的命令,带上 -d,因为我们只在开发环境下

npm i -D webpack webpack-cli

我们没用到webpack-dev-server,安装完成后我们创建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; 
};

最开始我们没那么多的配置需要配置。我们要使用它,先改一下package.json

“scripts”:{  
 “start”:“webpack --progress --env.development”, 
 “start :prod”:“webpack --progress”  
 },

然后我们就可以通过任一命令(npm start)来构建应用程序,它会创建一个dist/main.js,我们可也使用webpack.config.js指定输出不同的名称,现在的目录结构应该如下

手把手教你使用TypeScript开发Node.js应用

nodemon

为什么不用webpack-dev-server,是因为没法用,所以可以使用nodemon来解决,它可以在我们开发期间重新启动Node.js的应用程序,一样我们先来安装,依然需要 -d

npm i -D nodemon-webpack-plugin

然后重新配置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; 
};

Webpack 监视配置将在我们更改文件时重建应用程序,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" 
 },

使用TypeScript

先安装依赖项

npm i -D typescript ts-loader @types/node@^10.0.0

手把手教你使用TypeScript开发Node.js应用

ts-loader(ts加载器)

因为要用ts-loader Webpack插件来编译我们的TypeScript,所以得让Webpack知道我们是使用了ts-loader插件来处理TypeScript文件的,更新之前的webpack.config.js

// webpack.config.js 
 'use strict'; 
const NodemonPlugin = require('nodemon-webpack-plugin'); 
module.exports = (env = {}) => { 
 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(...); 
 }; 
if (env.nodemon) { 
 config.watch = true; 
 config.plugins.push(new NodemonPlugin()); 
 } 
return config; 
};

tsconfig.json

TypeScript的配置文件

// 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"] 
}

然后更改下之前创建的js文件扩展名

// 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();

现在目录结构应该是这样的

手把手教你使用TypeScript开发Node.js应用

总结

我们可以使用多种方式来创建TypeScript的Nodejs应用,不必拘泥于这一种,而且可能会有人并不赞同,因为TypeScript比纯Javascript更需要花费更多精力,不过在新项目中,你仍然可以尝试这种方式,如果你有什么好的建议,欢迎在评论区留下你的意见!

手把手教你使用TypeScript开发Node.js应用

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

Javascript 相关文章推荐
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
vue视图不更新情况详解
May 16 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
微信小程序上线发布流程图文详解
May 06 #Javascript
ES6的解构赋值实例详解
May 06 #Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 #Javascript
Vue动态组件和异步组件原理详解
May 06 #Javascript
微信小程序按钮点击跳转页面详解
May 06 #Javascript
详解vue中移动端自适应方案
May 05 #Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 #Javascript
You might like
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
深入理解PHP中的count函数
2016/05/31 PHP
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
JS实现百度搜索框
2021/02/25 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
python基于property()函数定义属性
2020/01/22 Python
python随机模块random使用方法详解
2020/02/14 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
初三化学教学反思
2014/01/23 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript