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,
    '^@/(.*)': '/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,
    '^@/(.*)': '/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最后的更新已经是两年前了。

相关推荐
梦想CAD控件15 分钟前
网页CAD中组(Group)功能的二次开发
前端·javascript·github
讨厌吃蛋黄酥15 分钟前
🔥 JavaScript异步之谜:单线程如何实现“同时”做多件事?99%的人都理解错了!
前端·javascript·面试
华仔啊24 分钟前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
徐同保1 小时前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
~无忧花开~1 小时前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
颜酱1 小时前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金611271 小时前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端
spionbo1 小时前
Vue 模拟键盘组件封装方法与使用技巧详解
前端
泉城老铁1 小时前
springboot 对接发送钉钉消息,消息内容带图片
前端·spring boot·后端
顾青1 小时前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序