优雅的扩展React官方cli配置

FB官方的cli也和vue-cli3.x开始一样,隐藏了webpack配置文件,但是官方没有提供类似vue.config.js这种配置入口,如果想扩展只能eject,所以记录一下来自社区的解决方案,通过react-app-rewiredcustomize-cra不用eject也可以一定程度扩展cli配置

react-app-rewired

通过配置config-overrides.js文件,来重写cli原本的配置文件

customize-cra

提供了一些便捷的配置方案,例如less、babel相关等

基本使用

  • yarn || npm 安装 react-app-rewired customize-cra
  • 根目录创建config-overrides.js文件
  • 修改package.json启动脚本命令,如下
    {
        "scripts": {
            "start": "react-app-rewired start",
            "build": "react-app-rewired build",
            "test": "react-app-rewired test",
            "eject": "react-app-rewired eject"
        }
    }
  • 支持less
    <!-- 当前文件:config-overrides.js -->
    <!-- 引入重写方法和添加lessloader的方法 -->
    const { override, addLessLoader } = require('customize-cra')
    module.exports = {
        webpack: override(
            <!-- 可以传递一个配置对象作为参数 -->
            addLessLoader()
        )
    }

扩展配置

  • 查看addLessLoader的源码,可以看到内部返回了一个函数,函数的参数是一个对象,即cli原本webpack配置的对象,然后在其基础上做我们想做的扩展,在返回该对象即可;下图为config对象
  • 实战,添加一个支持解析md文件内容的loader,这里使用raw-loader来读取md文件原始内容,然后在具体的文件内部做其他操作
    • 安装raw-loader
    • 获取原始配置下rules
    • 第一个参数是对解析器(parser)的配置,图中为关闭require.entrue;第二个是对rules解析的配置, 配置当一类文件match某一个loader,处理完毕后就退出
      <!-- 当前文件:config-overrides.js -->
      const addMdLoader=()=>config=>{
          <!-- 获取rules数组 -->
          let rules=config.module.rules[1].oneOf
          rules.unshift({
              test: /\.txt$/i,
              use: 'raw-loader'
          })
          return config
      }
      module.exports = {
          webpack: override(
              addMdLoader(),
          )
      }

总结

这篇笔记所有的尝试来自最初对md文件解析的整个需求,所以总结一下react or vue中怎么获取md文件内容

  • 直接引入对应的md文件,然后fetch去取
  • 通过配置raw-loader,然后直接获取引入的md文件即可拿到内容
  • 通过社区的markdown-loader,然后直接引入即可那得到渲染成HTML后的内容

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!