【第一部分】create-react-app 技术栈：react+react-router+redux+axios+es6+webpack

内容目录

##第一步创建一个项目 并 eject

create-react-app react-new-project
cd react-new-project
yarn start
yarn test
yarn eject

##第二步：按需加载antd

yarn add antd
yarn add babel-plugin-import --save-dev

找到config文件夹，配置文档 webpack.config.js
大约在398行处，此处的test: /\.(js|mjs|jsx|ts|tsx)$/, 新增如下代码

[  "import",
 {
   libraryName: "antd",
   style: 'css'
 }
] // antd按需加载

或者：
package.json文件


"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }

##第三步：修改app.js

// app.js
import React from 'react';
import './App.css';
import {Button} from 'antd'

function App() {
  return (
    <div className="App">
      <Button type="primary">按钮</Button>
    </div>
  );
}

export default App;

##第四步：yarn start 重启项目，正常运行，渲染蓝色Button成功

##第五步：要使用Sass必须首先安装node-sass

###配置 sass【此项目没有用sass】

npm install sass-loader node-sass --save-dev

安装完之后，我们就可以直接把原来的CSS文件后缀直接改为 .scss 或者.sass,然后组件中导入的文件不再是 css文件而是scss文件即可。

import React from 'react';
import './App.scss';
import './assets/css/common.scss'
import {Button} from 'antd'

function App() {
  return (
    <div className="App">
      <Button type="primary">按钮</Button>
    </div>
  );
}

export default App;

目录里src下新建公用的文件夹assets

src/assets/css

src/assets/css/common.scss

src/assets/js

src/assets/imgs

• src
  • assets
    • css
      • common.scss
    • js
    • imgs

如果要使用less, 安装less

less和less-loader都要安装。less是支持less语法的，less-loader是webpack使用来编译less的。

npm install less less-loader --save

###配置less 【此项目没有用less】

（先安装npm i less@^2.7.3 less-loader）

修改config/webpack.config.js

新增less配置变量

// 找到这里
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//添加两行
const lessRegex = /\.less$/;  // 新增less配置
const lessModuleRegex = /\.module\.less$/; // 新增less配置，这个其实不配置也行


//找到此位置
 {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },
//这里进行添加
// Less 解析配置
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              )
            },

需要注意一下几个地方：

1.lessRegex中importLoaders的值为1

当然这个是2也能使用，但是它的值是根据lessRegex变量后面正则中匹配的loader数来决定的，比如const cssRegex = /\.css$/只是处理css一种类型的文件，那应该就是1；const sassRegex = /\.(scss|sass)$/;对应的是scss和sass两种类型，那就应该是2.

2.lessRegex的use中增加modules配置

modules可以不设置，不设置的话，less只能通过字符串名的方式使用，比如定义了一个

.title

,引用时

import './index.less'

，使用时：

<div className="title"></div>

如果需要通过模块的方式调用，则需要把modules设置成true，就可以通过styles.title方式使用了。import styles from './index.less',使用``

第二种配置方式

可以不增加新的变量，把css的配置包含less

const cssRegex = /\.(css|less)$/; //增加less
const cssModuleRegex = /\.module\.(css|less)$/;

{
    test: cssRegex,
    exclude: cssModuleRegex,
    use: getStyleLoaders({
            importLoaders: 2,// 改成2
            modules: true,//使用模块方式访问样式
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        "less-loader" //增加loader
    ),
    // Don't consider CSS imports dead code even if the
    // containing package claims to have no side effects.
    // Remove this when webpack adds a warning or an error for this.
    // See https://github.com/webpack/webpack/issues/6571
    sideEffects: true
}

##第六步：兼容浏览器配置

public文件下新增两个兼容浏览器的文件，并修改public/index.html

es6-sham.min.js
es6-shim.min.js


<title>React App项目</title>
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<script type="text/javascript" src="%PUBLIC_URL%/es6-sham.min.js"></script>
<script type="text/javascript" src="%PUBLIC_URL%/es6-shim.min.js"></script>

兼容问题

npm install --save babel-polyfill

src/index.js
//头部引入：
import 'babel-polyfill';// 或者require('babel-polyfill');

// src/index.js

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

##第七步：安装 cross-env 并修改package.json文件

npm install --save-dev cross-env
或
yarn add cross-env -D

//新增
"devDependencies": {
    "cross-env": "^5.2.1"
 }
  
//修改
 "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
 
//改为：
"scripts": {
    "start": "cross-env REACT_APP_SECRET_API=development node scripts/start.js",
    "testbuild": "cross-env REACT_APP_SECRET_API=test node scripts/build.js",
    "prebuild": "cross-env REACT_APP_SECRET_API=preplanned node scripts/build.js",
    "build": "cross-env REACT_APP_SECRET_API=production node scripts/build.js"
},
  

// 分别对应测试环境，预发环境，生产环境的打包，打包后的build可以部署到服务器上

  npm run testbuild
  npm run prebuild
  npm run build

yarn start 运行一下，正常，继续

见下一篇

【第一部分】create-react-app 技术栈：react+react-router+redux+axios+es6+webpack

【第二部分】create-react-app 技术栈：react+react-router+redux+axios+es6+webpack

【第三部分】create-react-app 技术栈：react+react-router+redux+axios+es6+webpack