Create react app 修改webapck配置导入文件alias

create react app

create-react-app是 react 的官方项目脚手架,可以帮我们快速的搭建一个 react 项目。了解 vue 的同学应该知道,vue的官方脚手架是默认支持@src的绝对路径引用,可以优雅高效的引用其它模块,特别是跨目录,深嵌套的引用。而且vue把webpack的配置文件暴露出来,可以很方便的对webapck进行个性化的配置修改。相比之下,create react app生成的项目,默认还是用相对路径的引入,而且把webpack的配置深度集成到脚本里面,如果需要个性化的修改配置,只能通过react-scripts eject来导出wenpack配置,而且修改之后就只能自己维护了,一些我们不需要修改的react官方默认配置可能就会丢失。我们可以通过以下两个插件来优雅的修改create react app生成的项目配置,以修改导入路径alias为例说明。

react app rewired

react-app-rewired

  1. 安装插件

    npm install react-app-rewired --save-dev

  2. 创建 config-overrides.js

    /* config-overrides.js */

    const path = require('path');

    module.exports = {
    webpack: function(config, env) {
    config.resolve.alias['@'] = path.resolve(__dirname, 'src');
    return config;
    },
    jest: function(config) {
    const {
    moduleNameMapper = {},
    } = config;
    config.moduleNameMapper = {
    ...moduleNameMapper,
    '^@/(.*)$': '<rootDir>/src/$1',
    };
    return config;
    }
    }

  3. 修改 react-scripts 的默认npm脚本

    /* package.json */

    "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
    }

@craco/craco

@craco/craco

  1. 安装

    npm i -D @craco/craco

  2. 创建 craco-config.js 文件

    const path = require('path');

    module.exports = {
    webpack: {
    configure: (webpackConfig) => {
    webpackConfig.resolve.alias['@'] = path.resolve(__dirname, 'src');
    return webpackConfig;
    },
    },
    jest: {
    configure: (jestConfig) => {
    const {
    moduleNameMapper = {},
    } = jestConfig;
    jestConfig.moduleNameMapper = {
    ...moduleNameMapper,
    '^@/(.*)$': '<rootDir>/src/$1',
    };
    return jestConfig;
    },
    }
    };

  3. 修改 react-scripts 的默认npm脚本

    /* package.json */

    "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
    }

总结

我们可以通过 react-app-rewired@craco/craco 两个插件优雅的修改 create-react-app 生成的项目配置。两个插件的使用方法都差不多,也都可以实现我们的需求,至于使用哪一个见仁见智。我建议是用@craco/craco,比较新,react-app-rewired最后的更新已经是两年前了。

相关推荐
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐7 小时前
前端图像处理(一)
前端