安装react及其antd一些注意事项

 安装react命令：

npm install -g create-react-app

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

yarn add react-router-dom axios less-loader

 暴露webpack配置文件

yarn eject

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

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

 

rm -rf node_modules
yarn install

安装antd和antd mobile 

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加载功能

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版本之间都可以安装