国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

手把手教你使用TypeScript開發Node.js應用

來源:懂視網 責編:小采 時間:2020-11-27 21:57:30
文檔

手把手教你使用TypeScript開發Node.js應用

手把手教你使用TypeScript開發Node.js應用:為什么要使用TypeScript? 為了減少代碼編寫過程中出現的錯誤,以及更好的維護你的項目,本文將手把手教你配置一個簡單的開發環境來編寫Node.js的應用程序,創建這樣的一個開發環境有很多方式,這只是其中一種,希望對你有所幫助! 手把手教你使用Type
推薦度:
導讀手把手教你使用TypeScript開發Node.js應用:為什么要使用TypeScript? 為了減少代碼編寫過程中出現的錯誤,以及更好的維護你的項目,本文將手把手教你配置一個簡單的開發環境來編寫Node.js的應用程序,創建這樣的一個開發環境有很多方式,這只是其中一種,希望對你有所幫助! 手把手教你使用Type

為什么要使用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目錄下),打印了我的筆記本電腦的信息

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指定輸出不同的名稱,現在的目錄結構應該如下

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 

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的Nodejs應用,不必拘泥于這一種,而且可能會有人并不贊同,因為TypeScript比純Javascript更需要花費更多精力,不過在新項目中,你仍然可以嘗試這種方式,如果你有什么好的建議,歡迎在評論區留下你的意見!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

手把手教你使用TypeScript開發Node.js應用

手把手教你使用TypeScript開發Node.js應用:為什么要使用TypeScript? 為了減少代碼編寫過程中出現的錯誤,以及更好的維護你的項目,本文將手把手教你配置一個簡單的開發環境來編寫Node.js的應用程序,創建這樣的一個開發環境有很多方式,這只是其中一種,希望對你有所幫助! 手把手教你使用Type
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 一级高清| 欧美wwww| 国产一级一级一级成人毛片 | 国产欧美视频在线观看 | 免费国产一区 | 亚洲 自拍 另类 欧美 综合 | 成人欧美一区二区三区黑人 | 一级成人a毛片免费播放 | 亚洲第一视频网站 | 欧美1区二区三区公司 | 夜精品a一区二区三区 | 香蕉乱码成人久久天堂爱免费 | 欧美日本一本 | 欧美成人禁片在线观看网址 | 日本二区在线观看 | 精品欧美一区二区三区 | 中文字幕在线不卡 | 香蕉成人啪国产精品视频综合网 | 人善交zzzxxx另类| 亚洲三级在线视频 | 国产成人三级经典中文 | 黄色视频毛片 | 亚洲精品二三区伊人久久 | 国产亚洲一区二区三区啪 | 亚洲欧美在线观看一区二区 | 久久亚洲精品国产精品婷婷 | va欧美国产在线视频 | 日韩亚洲欧美日本精品va | 国产精品第5页 | 国产成人久久精品一区二区三区 | 日韩精品免费看 | 久久综合精品国产一区二区三区无 | 91久久精品国产亚洲 | 中文字幕国产欧美 | 综合视频在线 | 亚洲图欧美 | 成人三级在线观看 | 一区二区免费播放 | 日本高清一区二区三区不卡免费 | 亚洲欧美精品伊人久久 | 国产精品香蕉一区二区三区 |