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>