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

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

为什么要使用TypeScript?

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

[[264316]]

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

首先配置package.json

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

  1.  
  2.  "name": "start",  
  3.  "version": "1.0.0",  
  4.  "description": "",  
  5.  "main": "index.js",  
  6.  "scripts": {  
  7.  "test": "echo "Error: no test specified" && exit 1"  
  8.  },  
  9.  "author": "",  
  10.  "license": "ISC"  

后面用到其他的在添加

开始

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

  1. // src/information-logger.js  
  2. const os = require('os');  
  3. const { name, version} = require('../package.json');  
  4. module.exports = {  
  5.  logApplicationInformation: () =>  
  6.  console.log({  
  7.  application: {  
  8.  name,  
  9.  version,  
  10.  },  
  11.  }),  
  12.  logSystemInformation: () =>  
  13.  console.log({  
  14.  system: {  
  15.  platform: process.platform,  
  16.  cpus: os.cpus().length,  
  17.  },  
  18.  }),  
  19. };  
  20. // src/main.js  
  21. const informationLogger = require('./information-logger');  
  22. informationLogger.logApplicationInformation();  
  23. informationLogger.logSystemInformation(); 

我们先运行一下:node main.js(先到src目录下),打印了我的笔记本电脑的信息:

Webpack

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

  1. npm i -D webpack webpack-cli 

我们没用到webpack-dev-server,安装完成后我们创建webpack.config.js的配置文件。

  1. 'use strict';  
  2. module.exports = (env = {}) => {  
  3.  const config = {  
  4.  entry: ['./src/main.js'],  
  5.  mode: env.development ? 'development' : 'production',  
  6.  target: 'node',  
  7.  devtool: env.development ? 'cheap-eval-source-map' : false,  
  8.  };  
  9. return config;  
  10. }; 

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

  1. “scripts”:{   
  2.  “start”:“webpack --progress --env.development”,  
  3.  “start :prod”:“webpack --progress”   
  4.  }, 

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

nodemon

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

  1. npm i -D nodemon-webpack-plugin 

然后重新配置webpack.config.js 。

  1. // webpack.config.js  
  2. 'use strict';  
  3. const NodemonPlugin = require('nodemon-webpack-plugin');  
  4. module.exports = (env = {}) => {  
  5.  const config = {  
  6.  entry: ['./src/main.js'],  
  7.  mode: env.development ? 'development' : 'production',  
  8.  target: 'node',  
  9.  devtool: env.development ? 'cheap-eval-source-map' : false,   
  10.  resolve: { // tells Webpack what files to watch.  
  11.  modules: ['node_modules', 'src', 'package.json'],  
  12.  },   
  13.  plugins: [] // required for config.plugins.push(...);  
  14.  };  
  15. if (env.nodemon) {  
  16.  config.watch = true 
  17.  config.plugins.push(new NodemonPlugin());  
  18.  }  
  19. return config;  
  20. }; 

Webpack 监视配置将在我们更改文件时重建应用程序,nodemon在我们构建完成重新启动应用程序,需要重新配置下package.json 。

  1. "scripts": {  
  2.  "start": "webpack --progress --env.development --env.nodemon",  
  3.  "start:prod": "webpack --progress --env.nodemon",  
  4.  "build": "webpack --progress --env.development",  
  5.  "build:prod": "webpack --progress",  
  6.  "build:ci": "webpack"  
  7.  }, 

使用TypeScript

先安装依赖项:

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

ts-loader(ts加载器)

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

  1. // webpack.config.js  
  2.  'use strict';  
  3. const NodemonPlugin = require('nodemon-webpack-plugin');  
  4. module.exports = (env = {}) => {  
  5.  const config = {  
  6.  entry: ['./src/main.ts'],  
  7.  mode: env.development ? 'development' : 'production',  
  8.  target: 'node',  
  9.  devtool: env.development ? 'cheap-eval-source-map' : false,  
  10.  resolve: {  
  11.  // Tells Webpack what files to watch   
  12.  extensions: ['.ts', '.js'],  
  13.  modules: ['node_modules', 'src', 'package.json'],  
  14.  },  
  15.  module: {  
  16.  rules: [  
  17.  {  
  18.  test: /.ts$/,  
  19.  use: 'ts-loader',  
  20.  },  
  21.  ],  
  22.  },  
  23.  plugins: [], // Required for config.plugins.push(...);  
  24.  };  
  25. if (env.nodemon) {  
  26.  config.watch = true 
  27.  config.plugins.push(new NodemonPlugin());  
  28.  }  
  29. return config;  
  30. }; 

tsconfig.json

TypeScript的配置文件:

  1. // tsconfig.json  
  2.  
  3.  "compilerOptions": {  
  4.  "target": "esnext",  
  5.  "module": "esnext",  
  6.  "moduleResolution": "node",  
  7.  "lib": ["dom", "es2018"],  
  8.  "allowSyntheticDefaultImports": true,  
  9.  "noImplicitAny": true, 
  10.   "noUnusedLocals": true,  
  11.  "removeComments": true,   
  12.  "resolveJsonModule": true,  
  13.  "strict": true,  
  14.  "typeRoots": ["node_modules/@types"]  
  15.  },  
  16.  "exclude": ["node_modules"],  
  17.  "include": ["src/**/*.ts"]  

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

  1. // information-logger.ts  
  2. import os from 'os';  
  3. import { name, version } from '../package.json';  
  4. export class InformationLogger {  
  5.  static logApplicationInformation(): void {  
  6.  console.log({  
  7.  application: {  
  8.  name,  
  9.  version,  
  10.  },  
  11.  });  
  12.  }  
  13. static logSystemInformation(): void {  
  14.  console.log({  
  15.  system: {  
  16.  platform: process.platform,  
  17.  cpus: os.cpus().length,  
  18.  },  
  19.  });  
  20.  }  
  21.  
  22. // main.ts  
  23. import { InformationLogger } from './information-logger';  
  24. InformationLogger.logApplicationInformation();  
  25. InformationLogger.logSystemInformation(); 

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

总结

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

[[264318]]

 

责任编辑:庞桂玉 来源: 今日头条
相关推荐

2021-07-14 09:00:00

JavaFX开发应用

2020-08-12 09:07:53

Python开发爬虫

2021-02-26 11:54:38

MyBatis 插件接口

2015-04-02 11:22:29

2022-12-07 08:42:35

2021-11-24 16:02:57

鸿蒙HarmonyOS应用

2024-04-02 08:58:13

2024-03-05 18:27:43

2021-08-02 07:35:19

Nacos配置中心namespace

2011-01-10 14:41:26

2011-05-03 15:59:00

黑盒打印机

2021-01-19 09:06:21

MysqlDjango数据库

2021-03-12 10:01:24

JavaScript 前端表单验证

2022-07-22 12:45:39

GNU

2020-05-15 08:07:33

JWT登录单点

2022-10-30 10:31:42

i2ccpuftrace

2021-12-15 08:49:21

gpio 子系统pinctrl 子系统API

2023-04-26 12:46:43

DockerSpringKubernetes

2022-07-27 08:16:22

搜索引擎Lucene

2022-03-14 14:47:21

HarmonyOS操作系统鸿蒙
点赞
收藏

51CTO技术栈公众号