手把手教你行使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

（编辑：湖南网）

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