基于create-react-app的再配置

前面的话

　　使用Facebook官方推出的create-react-app脚手架，我们基本可以零配置搭建基于webpack的React开发环境。但是，如果需要个性化定制，则还需要基于create-react-app进行再配置

环境变量

　　在根目录下新建.env.local文件，可以用于本地环境变量覆盖

　　如在该文件中进行如下设置

PORT=2000

　　则开发服务器会在2000端口开启服务

配置代理

　　在package.json中配置，与其他项目同级

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": {
"/api": {
"target": "https://m.weibo.cn",
"changeOrigin": true,
"pathRewrite":{"^/api":""}
}
}

　　由于create-react-app默认支持fetch，所以在组件中使用fetch获取数据，结果显示在了控制台中

fetch('api/comments/show?id=4199740256395164&page=1').then(res => {
res.json().then(data => {
console.log(data)
})
})

配置别名

　　使用react-app-rewired来进行react的再配置，首先使用npm安装

$ npm install react-app-rewired --save-dev

　　然后，更改package.json中的scripts部分

"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app eject"
},

　　然后，在根目录新建config-overrides.js文件，配置如下

const path = require('path');
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = function override(config, env) {
config.resolve.alias = {
'@': resolve('src')
}
return config;
}

　　重启开发服务器后，就可以使用@来表示'src'的绝对路径了