环境
- 创建react webpack环境
- ts版本 npx create-react-app react-ts --template typescript
- 暴露配置项
- npm run eject
- 配置proxy
- 在'src’目录(config/path.js引用路径为src,可自行重写)下新建'setupProxy.js'并写入：
const proxy = require('http-proxy-middleware’);
const proxyConfig = {
'/index’: {
target: 'https://www.fsdfsdf.com',
changeOrigin: true
},
‘/api’: {
target: 'https://www.google.com',
changeOrigin: true
}
}
module.exports = function (app) {
Object.keys(proxyConfig).forEach((key) =>{
app.use(proxy(key, proxyConfig[key]));
})
};配置tslint
- npm install tslint tslint-react -D
- 在根目录下新建tslint.json：
{
"extends": ["tslint:recommended", "tslint-react"],
"rules": {
"quotemark": [true, "single”],
…(各项配置自行了解，按需配置)
}
}TypeScript引入Webpack别名alias模块问题---配置webpack的alias属性之后,ts引入会报错.
需要配置tsconfig.json
添加以下属性
{
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
webpack的alias设置如下:
alias: {
'@': path.resolve(__dirname, 'src/')
}
