React脚手架生成配置文件

[Wscats]

生成config目录

在 create-react-app 的 package.json 文件里面有一行命令

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

所以当我们执行npm run eject的时候，我们就可以在我们的项目中生成一个config的配置文件，里面可以更改 webpack 的参数

配置sass

经过上面的操作之后，我们可以在项目中使用 sass 由于 sass 的配置环境已经给我们配置好了

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// code

{
      test: sassRegex,
      exclude: sassModuleRegex,
      use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
},

所以我们可以直接在命令行里面安装node-sass就可以在 react 项目中使用 sass 了

配置Proxy代理

由于我们在项目中经常会出现跨域，我们可以在 package.json 文件中，用 proxy 来设置服务器代理

"proxy": "http://news-at.zhihu.com",

在项目中当你就可以发请求代理到对应的连接上

React.axios.get('/api/jsons/')
    .then((response) => {
        console.log(response);
        this.setState({
            cards: response.data.data.cards
        })
    })
    .catch(function (error) {
        console.log(error);
    });

以上连接就会从/api/jsons/代理到https://news-at.zhihu.com/api/jsons/访问数据

[zq0322]