溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
為什么要使用TypeScript？
為了減少代碼編寫過程中出現(xiàn)的錯誤，以及更好的維護你的項目，本文將手把手教你配置一個簡單的開發(fā)環(huán)境來編寫Node.js的應用程序，創(chuàng)建這樣的一個開發(fā)環(huán)境有很多方式，這只是其中一種，希望對你有所幫助！
手把手教你使用TypeScript開發(fā)Node.js應用
首先配置package.json
因為要在項目中使用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"
}
后面用到其他的在添加
開始
我們在項目的根目錄創(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();
我們先運行一下：node main.js（先到src目錄下），打印了我的筆記本電腦的信息
Webpack
首先第一件事就是要配置Webpack的依賴項，記得用下面的命令，帶上 -d，因為我們只在開發(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）來構建應用程序，它會創(chuàng)建一個dist/main.js，我們可也使用webpack.config.js指定輸出不同的名稱，現(xiàn)在的目錄結構應該如下
nodemon
為什么不用webpack-dev-server，是因為沒法用，所以可以使用nodemon來解決，它可以在我們開發(fā)期間重新啟動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 監(jiān)視配置將在我們更改文件時重建應用程序,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"]
}
然后更改下之前創(chuàng)建的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();
現(xiàn)在目錄結構應該是這樣的
總結
我們可以使用多種方式來創(chuàng)建TypeScript的Nodejs應用，不必拘泥于這一種，而且可能會有人并不贊同，因為TypeScript比純Javascript更需要花費更多精力，不過在新項目中，你仍然可以嘗試這種方式，如果你有什么好的建議，歡迎在評論區(qū)留下你的意見！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
