React + antd + antd mobile开发环境配置

0. 全局安装facebook提供的react官方脚手架create-react-app

npm install -g create-react-app

1. 利用create-react-app脚手架创建初始项目结构

create-react-app my-app  // 创建初始项目结构
cd my-app                // 进入项目目录
npm start                // 启动项目，此时可以在http://localhost:3000/上看到初始页面

2. 安装基础插件router，axios，less-loader

yarn add react-router-dom axios less-loader

3. 暴露webpack配置文件

yarn eject

为什么要暴露webpack配置文件呢？
因为Ant Design是基于less开发的，而我们初始化之后React项目并不支持less。
为了让我们的项目可以更换主题，所以需要暴露出webpack配置文件，让项目可以支持less。

注意：暴露配置文件之后，要删除node_modules并重新安装插件，否则运行会出错

rm -rf node_modules
yarn install

4. 安装antd和antd mobile

yarn add antd antd-mobile

5. 实现按需加载功能

首先，安装babel-plugin-import插件

yarn add babel-plugin-import

其次，修改webpack配置文件(webpack.config.js)

    plugins: [
        // ↓↓↓这部分是增加的内容↓↓↓
        ['import',{ libraryName:'antd',style:true },'antd'],
        ['import',{ libraryName:'antd-mobile',style:true },'antd-mobile'],
        // ↑↑↑这部分是增加的内容↑↑↑
        [
        require.resolve('babel-plugin-named-asset-import'),
        {
            loaderMap: {
            svg: {
                ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
            },
            },
        },
        ],
    ],

为什么需要按需加载功能？
按需加载功能，可以让我们在使用Ant Design组件的时候，不需要引入所有的组件，只需要引入需要的组件就可以了。

6. 实现less加载功能

首先，安装less插件

yarn add less

其次，修改webpack配置文件(webpack.config.js)

    {
        test: cssRegex,
        exclude: cssModuleRegex,
        use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        }),
        // 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,
    },
    // ！！以下就是新增的内容！！
    {
        test: /\.less$/,
        use: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
            importLoaders: 1,
            },
        },
        {
            loader: require.resolve('postcss-loader'),
            options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
                }),
            ],
            },
        },
        {
            loader: require.resolve('less-loader'),
            options:{
                modules:false,
                javascriptEnabled:true,
                modifyVars:{
                    "@primary-color": "#f9c700"    // 这里可以修改主题色
                }         
            }
        }
        ],
    },

注意：如果导入less出错，把less的version降级到2.7.3(version:2.7.3 < 3.0.0)
yarn add less@^2.7.3 => 这里的^表示只要在2.7.3 ~ 3.0.0版本之间都可以安装

7. 安装Chrome扩展React Developer Tools（建议）

在Chorme的应用商店中下载扩展程序并安装，可以方便地查看组件的状态

8. 配置完成

至此，就可以开心的在React中使用Ant Design和Ant Design Mobile了

import { Button } from 'antd';  

<Button type="primary">测试</Button>

import { Button } from 'antd-mobile';  

<Button type="primary">测试</Button>

还可以通过修改webpack配置文件(webpack.config.js)，更换主题色

"@primary-color": "#f9c700"    // 这里替换成你想要的主题色

9. 写在最后

如果嫌以上配置步骤太过繁琐，可以直接clone以下项目。
上面所有的配置已经在里面，开箱即可用。

git clone https://gitlab.com/chenys/react-antd-project.git

最后编辑于：2020.03.01 22:22:56