# antMotion_test

**Repository Path**: sbotlp/antMotion_test

## Basic Information

- **Project Name**: antMotion_test
- **Description**: Create-react-app+Antd+Less配置
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-03-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Create-react-app+Antd+Less配置
### 说明

- React官方脚手架工具Create-react-app 用于快速创建React应用，但依旧有局限性，我们根据项目需求需要对Create-react-app的配置进行修改。这里针对引入Antd的两种配置方式进行配置。

#方案
- 一. React-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）。 
- 1. 安装react-app-rewired
```
npm install –save-dev react-app-rewired
```


- 2.修改package.json启动项



```
/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test --env=jsdom",
}

```

- 3.在项目根目录创建一个 config-overrides.js 用于修改默认配置。


```
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};
```


- 4.使用babel-plugin-import实现Antd按需加载，修改config-overrides.js 



```
npm install –save-dev babel-plugin-import


/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css'}], config);
    return config;
};
```

- 5.使用react-app-rewire-less配置Less

```
npm install –save-dev react-app-rewire-less

/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
   config = rewireLess.withLoaderOptions({
     modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
    return config;
};

```
- 我遇到的问题： 1. \__DEV__ is not defined.

```
/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireDefinePlugin = require('react-app-rewire-define-plugin');

module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
    config = rewireLess.withLoaderOptions({
        modifyVars: { "@primary-color": "#1DA57A" },
    })(config, env);
    config = rewireDefinePlugin(config, env, {
        __DEV__: false
    });
    return config;
};


###
Cannot read property ‘exclude’ of undefined 
参考 https://github.com/timarney/react-app-rewired/issues/145 
解决方案 https://github.com/dawnmist/react-app-rewired/commit/25208ab81791edb4356dc959188bcd4c4471ad87
```



## 二. npm run eject 暴露所有内建的配置 
- 1. 使用babel-plugin-import实现Antd按需加载，修改package.json，或者在项目根目录新建文件.babelrc写配置，注意是二选一。

- npm install –save-dev babel-plugin-import


```
1）package.json
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
  },


2）.babelrc
{
   "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
}
注意： 不要认为package.json里已有presets配置这里就不用写，这里的.babelrc会覆盖package.json里带有的babel配置，如果删除presets配置，会报错。

1）安装less-loader 和 less
- npm install –save-dev less-loader less

2）修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改) 
查找 ：exclude 
原本的 exclude: [/\.js$/, /\.html$/, /\.json$/], 
修改为 exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],

查找：test: /.css$/ 
原本的 test: /\.css$/, 
修改为 test: /\.(css|less)$/,

在这个test的下面找到use，添加loader




 use: [  
    {...},
    {...},
    {
      loader: require.resolve('less-loader') // compiles Less to CSS
    }
  ],

ok，以上两种方式修改配置，择优选取。 
如果引入Antd，可能依赖于引入Less， 
如果不想引入Antd，可以舍弃Antd部分，按步骤引入Less。


```
# https://github.com/zhaoyu69/antd-spa 包含第一种方式 
#  https://github.com/zhaoyu69/nodejs-spider 包含第二种方式

# http://blog.csdn.net/zhaoyu_m69/article/details/78800887 我是抄这里的原创


# 自己踩的坑：
- 在webpack配置less的时候 一定要开启JavaScript内联，否则会死人的
```

{
  loader: require.resolve('less-loader'), // compiles Less to CSS
  options:{javascriptEnabled: true}//定要启动内联不然等丫的报错把
}

```