加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

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

发布时间:2019-05-06 01:10:40 所属栏目:建站 来源:最美分享Coder
导读:为什么要使用TypeScript? 为了减少代码编写过程中出现的错误,以及更好的维护你的项目,本文将手把手教你配置一个简单的开发环境来编写Node.js的应用程序,创建这样的一个开发环境有很多方式,这只是其中一种,希望对你有所帮助! 手把手教你使用TypeScri
副标题[/!--empirenews.page--]

为什么要使用TypeScript?

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

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

手把手教你使用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

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读