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

然后重新配置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

（编辑：91站长网）

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