手把手教你使用TypeScript开发Node.js应用
为什么要使用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 "htmlcode">“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 "htmlcode">"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.0ts-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 "htmlcode">// 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更需要花费更多精力,不过在新项目中,你仍然可以尝试这种方式,如果你有什么好的建议,欢迎在评论区留下你的意见!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:微信小程序上线发布流程图文详解