手把手教你使用TypeScript開發(fā)Node.js應(yīng)用

為什么要使用TypeScript？

成都創(chuàng)新互聯(lián)公司專注于金臺網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠為您提供金臺營銷型網(wǎng)站建設(shè)，金臺網(wǎng)站制作、金臺網(wǎng)頁設(shè)計(jì)、金臺網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造金臺網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供金臺網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

為了減少代碼編寫過程中出現(xiàn)的錯誤，以及更好的維護(hù)你的項(xiàng)目，本文將手把手教你配置一個簡單的開發(fā)環(huán)境來編寫Node.js的應(yīng)用程序，創(chuàng)建這樣的一個開發(fā)環(huán)境有很多方式，這只是其中一種，希望對你有所幫助！

首先配置package.json

因?yàn)橐陧?xiàng)目中使用Webpack，所以首先得創(chuàng)建一個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" 
}

后面用到其他的在添加

開始

我們在項(xiàng)目的根目錄創(chuàng)建一個src目錄，添加一個main.js和information-logger.js文件，我們先使用Javascript來創(chuàng)建：

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

我們先運(yùn)行一下：node main.js（先到src目錄下），打印了我的筆記本電腦的信息

手把手教你使用TypeScript開發(fā)Node.js應(yīng)用

Webpack

首先第一件事就是要配置Webpack的依賴項(xiàng)，記得用下面的命令，帶上 -d，因?yàn)槲覀冎辉陂_發(fā)環(huán)境下

npm i -D webpack webpack-cli

我們沒用到webpack-dev-server,安裝完成后我們創(chuàng)建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）來構(gòu)建應(yīng)用程序，它會創(chuàng)建一個dist/main.js，我們可也使用webpack.config.js指定輸出不同的名稱，現(xiàn)在的目錄結(jié)構(gòu)應(yīng)該如下

手把手教你使用TypeScript開發(fā)Node.js應(yīng)用

nodemon

為什么不用webpack-dev-server，是因?yàn)闆]法用，所以可以使用nodemon來解決，它可以在我們開發(fā)期間重新啟動Node.js的應(yīng)用程序，一樣我們先來安裝，依然需要 -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 監(jiān)視配置將在我們更改文件時(shí)重建應(yīng)用程序,nodemon在我們構(gòu)建完成重新啟動應(yīng)用程序，需要重新配置下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

先安裝依賴項(xiàng)

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

手把手教你使用TypeScript開發(fā)Node.js應(yīng)用

ts-loader（ts加載器）

因?yàn)橐胻s-loader Webpack插件來編譯我們的TypeScript，所以得讓W(xué)ebpack知道我們是使用了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"] 
}

然后更改下之前創(chuàng)建的js文件擴(kuò)展名

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

現(xiàn)在目錄結(jié)構(gòu)應(yīng)該是這樣的

手把手教你使用TypeScript開發(fā)Node.js應(yīng)用

總結(jié)

我們可以使用多種方式來創(chuàng)建TypeScript的Nodejs應(yīng)用，不必拘泥于這一種，而且可能會有人并不贊同，因?yàn)門ypeScript比純Javascript更需要花費(fèi)更多精力，不過在新項(xiàng)目中，你仍然可以嘗試這種方式，如果你有什么好的建議，歡迎在評論區(qū)留下你的意見！

手把手教你使用TypeScript開發(fā)Node.js應(yīng)用

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁題目：手把手教你使用TypeScript開發(fā)Node.js應(yīng)用
文章來源：http://jinyejixie.com/article46/ppehhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、外貿(mào)建站、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、做網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

手把手教你使用TypeScript開發(fā)Node.js應(yīng)用