react项目基本搭建

使用的是create-react-app@3.1.1版本
首先安装 npm install create-react-app -g
然后创建文件 create-react-app  react-test
进入文件
cd react-test
运行npm run eject让文件吧webpack相关配置暴露出来，之后删除node-modules (把不需要的包去掉)，重新安装一次npm install
跨环境变量使用cross-env  安装(npm install cross-env --save-dev)
package.json配置

"scripts": {

"dev:test": "cross-env REACT_APP_SECRET_API='dev_test' node scripts/start.js",

"dev:build": "cross-env REACT_APP_SECRET_API='dev_build' node scripts/start.js",

"build:test": "cross-env REACT_APP_SECRET_API='build_test' node scripts/build.js",

"build": "cross-env REACT_APP_SECRET_API='production' node scripts/build.js",

"test": "node scripts/test.js"

},

找到config文件里的env.js,找到这个函数getClientEnvironment

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        REACT_APP_SECRET_API:process.env.REACT_APP_SECRET_API,//加入自己的环境变量
        // Useful for resolving the correct path to static assets in `public`.
        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
        // This should only be used as an escape hatch. Normally you would put
        // images into the `src` and `import` them in code to get their paths.
        PUBLIC_URL: publicUrl,
      }
    );

创建你自己不用环境变量不同域名

 在入口index.js里面引入你自己定的文件名称  

import './utils/initEnv';
然后就可以使用全部变量global了

2加一个@
找到webpack.config

alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        '@':path.join(__dirname, '..', 'src'), //加这个就可以
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
      },

3 antd 使用
cnpm install antd --save
//index.js

import 'antd/dist/antd.css';
哪个页面要使用哪个组件就引入哪个组件，类似vux

import { Button } from 'antd';

<Button type="dashed">Dashed</Button>

也可以按需引入
使用 babel-plugin-import（推荐）。（不细说，可以参照官网）
下面这篇文件是兼容IE版本的调整 我只需要兼容IE11，IE11亲测有效
https://blog.csdn.net/it_rod/article/details/100574389

懒加载

import React,{Suspense,lazy}from 'react';

<Router>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Redirect exact from="/" to="/index" />
            <Route path="/index" component={lazy(()=>import('@/views/index'))}/>
            {/* <Redirect exact from="/webOne" to="/webOne/main" />
            <Route path="/webOne/main" component={FirstIndex}/> */}
          </Switch>
        </Suspense>
      </Router>