react在不弹出eject的情况下配置sass和antd

太过爱你忘了你带给我的痛 2023-02-10 05:08 3阅读 0赞

天气越来越热，公司的业务也慢慢放缓，这时候就有空暇时间为自己充点电了，然后就把目标放在了react上，公司的前端技术框架用的是vue。对react早就如雷贯耳，然后自己看了文档就劈里啪啦开始搞。在用create-react-app脚手架搭建项目的时候遇到一些配置上的小坑，所以在这里笔记一下。

> 配置sass

从react-scripts 2.0.0开始就支持直接配置sass了，安装个node-sass依赖即可

npm install node-sass --save-dev
    复制代码

这时问题来了，公共sass文件怎么管理呢？不可能每个页面都去引入一次吧，这时候想到了webpack来配置，不过create-react-app在不弹出eject时是没有webpack.config.js文件的。在antd按需加载的文档里面发现了一个craco的库可以解决这个问题，同时也可以很简单进行其他配置：

npm install @craco/craco --save
    复制代码

依赖下载完成后，修改package.json里面的scripts:

// package.json
    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
      }
    复制代码

在项目根目录新建一个craco.config.js的文件，你可以进行如下的配置（此处直接贴了一版@craco官方可配置项）：

const { when, whenDev, whenProd, whenCI, whenTest, ESLINT_MODES, POSTCSS_MODES } = require("@craco/craco");

module.exports = {
        reactScriptsVersion: "react-scripts" /* (default value) */,
        style: {
            modules: {
                localIdentName: ""
            },
            css: {
                loaderOptions: { /* Any css-loader configuration options: https://github.com/webpack-contrib/css-loader. */ },
                loaderOptions: (cssLoaderOptions, { env, paths }) => { return cssLoaderOptions; }
            },
            sass: {
                loaderOptions: { /* Any sass-loader configuration options: https://github.com/webpack-contrib/sass-loader. */ },
                loaderOptions: (sassLoaderOptions, { env, paths }) => { return sassLoaderOptions; }
            },
            postcss: {
                mode: "extends" /* (default value) */ || "file",
                plugins: [],
                env: {
                    autoprefixer: { /* Any autoprefixer options: https://github.com/postcss/autoprefixer#options */ },
                    stage: 3, /* Any valid stages: https://cssdb.org/#staging-process. */
                    features: { /* Any CSS features: https://preset-env.cssdb.org/features. */ }
                },
                loaderOptions: { /* Any postcss-loader configuration options: https://github.com/postcss/postcss-loader. */ },
                loaderOptions: (postcssLoaderOptions, { env, paths }) => { return postcssLoaderOptions; }
            }
        },
        eslint: {
            enable: true /* (default value) */,
            mode: "extends" /* (default value) */ || "file",
            configure: { /* Any eslint configuration options: https://eslint.org/docs/user-guide/configuring */ },
            configure: (eslintConfig, { env, paths }) => { return eslintConfig; },
            loaderOptions: { /* Any eslint-loader configuration options: https://github.com/webpack-contrib/eslint-loader. */ },
            loaderOptions: (eslintOptions, { env, paths }) => { return eslintOptions; }
        },
        babel: {
            presets: [],
            plugins: [],
            loaderOptions: { /* Any babel-loader configuration options: https://github.com/babel/babel-loader. */ },
            loaderOptions: (babelLoaderOptions, { env, paths }) => { return babelLoaderOptions; }
        },
        typescript: {
            enableTypeChecking: true /* (default value) */
        },
        webpack: {
            alias: {},
            plugins: [],
            configure: { /* Any webpack configuration options: https://webpack.js.org/configuration */ },
            configure: (webpackConfig, { env, paths }) => { return webpackConfig; }
        },
        jest: {
            babel: {
                addPresets: true, /* (default value) */
                addPlugins: true  /* (default value) */
            },
            configure: { /* Any Jest configuration options: https://jestjs.io/docs/en/configuration. */ },
            configure: (jestConfig, { env, paths, resolve, rootDir }) => { return jestConfig; }
        },
        devServer: { /* Any devServer configuration options: https://webpack.js.org/configuration/dev-server/#devserver. */ },
        devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => { return devServerConfig; },
        plugins: [
            {
                plugin: {
                    overrideCracoConfig: ({ cracoConfig, pluginOptions, context: { env, paths } }) => { return cracoConfig; },
                    overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => { return webpackConfig; },
                    overrideDevServerConfig: ({ devServerConfig, cracoConfig, pluginOptions, context: { env, paths, proxy, allowedHost } }) => { return devServerConfig; },
                    overrideJestConfig: ({ jestConfig, cracoConfig, pluginOptions, context: { env, paths, resolve, rootDir } }) => { return jestConfig };
                },
                options: {}
            }
        ]
    };
    复制代码

根据上面的配置项开始配置全局sass文件：

module.exports = {
        // ...
        style: {
            sass: {
                loaderOptions: {
                    data: `@import "~@/assets/css/variable.scss";@import "~@/assets/css/base.scss";`
                }
            }
        }
    }
    复制代码

以上就将全局sass配置好了。但紧接着问题又来了，想要为项目引入UI框架怎么引入？譬如antd。antd官方已经给出了按需加载的现成方法，按照官网步骤即可引入成功，但这里我们已经引入了@craco库，又该如何按需加载呢？craco-antd可以结合@craco来解决这个问题：

npm install -save craco-antd
    复制代码

下载完成后在craco.config.js中引入：

const CracoAntDesignPlugin = require("craco-antd")
    module.exports = {
        // ...
        plugins: [{ plugin: CracoAntDesignPlugin }]
    }
    复制代码

以上完成了对antd的按需引入。你还可以进行本地跨域、别名等常用配置：

> devServer、alias配置

const CracoAntDesignPlugin = require("craco-antd")
    module.exports = {
        // ...
        webpack: {
            // 别名
            alias: {
                '@': path.resolve('src')
            }
        },
        devServer: {
            port: 9999, // 端口配置
            proxy: {
                '/api': {
                    target: 'http://xxx.com',
                    ws: false, // websocket
                    changeOrigin: true, //是否跨域
                    secure: false,  // 如果是https接口，需要配置这个参数
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    }
    复制代码

#### 结语 ####

以上是在学习react时遇到的一些配置问题。若有写得不对的地方，请多多指教。