版本

babel-loader version:"8.1.0"

create-react-app:"3.4.1"

三个配置

第一部分:

{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
]
],
cacheDirectory: true,
cacheCompression: false,
compact: isEnvProduction,
},
},

第二部分

{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: false,
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap,
},
},

第三部分

"babel": {
"presets": [
"react-app"
]
}

疑惑

以上三部分是babel处理代码的配置来源,那么babel是怎么处理这些配置的?

解析

首先,看一下babel-loader中一些选项的含义:

babelrc:如果指定了选项filename,默认值为true,babel将会在项目中搜索配置文件;该配置只能在程序中配置,类似babel-loader。

[".babelrc", ".babelrc.js", ".babelrc.cjs", ".babelrc.mjs", ".babelrc.json"],以及package.json中的“babel”字段
这几个都是RelativeConfig

configFile:搜索指定的文件,如果没有就是false。默认会去搜索path.resolve(opts.root, "babel.config.json"),也可以指定文件。该配置只能在程序中配置,类似babel-loader。

 ["babel.config.js", "babel.config.cjs", "babel.config.mjs", "babel.config.json"];

如果babelrc与configFile同时指定为false,babel将不会搜索配置文件,babel-loader中的选项将成为babel的配置。

在其他特定条件下,babel-loader中的options会和项目中babel配置文件中的配置相合并,类似于webpack-merge。

configFileChain // babel.config.[json,js,mjs,cjs] 里面的配置
fileChain // .babelrc.[js,cjs,mjs,json]里面的配置
programmaticChain // babel-loader中的配置
const chain = mergeChain(mergeChain(mergeChain(emptyChain(), configFileChain), fileChain), programmaticChain);
// 经过合并生成最后的配置
// babelrc,configFile 设置为false的时候 configFileChain fileChain 里面的内容为空,最后的配置由babel-loader决定。

相关逻辑在node_modules/@babel/core/lib/config/config-chain.js中。

结论

所以文章开始的三个配置最后到达babel.transform的配置有两种:

第一种,被第一个test匹配(此处使用了oneOf),同时在 include: paths.appSrc的范围内,结果就是

  1. plugins中包含babel-plugin-named-asset-import;
  2. presets中是package.json中的babel字段的配置。

第二种,主要是上一种include的漏网之鱼,被exclude: /@babel(?:\/|\\{1,2})runtime/捡了起来,大多数是node_module中的文件。

presets中包含babel-preset-react-app/dependencies,主要原因是设置了babelrc和configFile为false,不再查找其他配置。

create-react-app中的babel配置探索的更多相关文章

  1. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  2. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  3. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  4. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  5. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

  9. create react app的 css loader 进行局部配置

    { test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnv ...

随机推荐

  1. Java操作RockeMQ

    RocketMQ是阿里巴巴在2012年开源的分布式消息中间件,目前已经捐赠给Apache基金会,已经于2016年11月成为 Apache 孵化项目,相信RocketMQ的未来会发挥着越来越大的作用,将 ...

  2. Python3-random模块-生成伪随机数

    Python3中的random模块可以生成一个伪随机数 常用的就三个模块函数 random.random() 返回0-1之间的一个随机数 random.randrange(i, j) 返回一个随机数 ...

  3. coderfoces#414 div.2

    第一次打cf 感觉很奇妙 开始看到题目感觉极其怪异 然后忽然发现第一题一堆数中的因数出现最多的不是2么 然后过了5分钟就被一个专门攻击的人hack掉了 不得不说题并不难甚至很水(都是几行的入门题) 但 ...

  4. python文件处理-根据txt列表将文件从其他文件夹 拷贝到指定目录

    内容涉及:路径拼接,文件拷贝,内容追加(append) # !/usr/bin/python # -*- coding: UTF-8 -*- import pandas as pd import os ...

  5. CSS选择器使用

    今天要对CSS选择器的使用方法做一个全面的总结(几乎全部是从这篇文章摘抄的 https://blog.csdn.net/qq_39241986/article/details/82185697) CS ...

  6. git和github入门指南(1)

    1.git和github简介 1.1.git是什么?github是什么?git和github的关系? Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. Git ...

  7. Navicat15安装激活版教程

    navicat15安装 一键式安装,安装包如下 链接:https://pan.baidu.com/s/1VTJmJ7ulUySWoWBu-fugiw 提取码:fz5u 先安装软件包点击安装,一直下一步 ...

  8. Python3-在windows快速运行一个简单的本地 HTTP 服务器

    1.打开控制台2.python -m http.server

  9. Html5中input新增的表单元素和属性介绍。

    input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...

  10. 【UWP】利用EF Core操作SQLite

    在以往开发中,一定要在vs中安装SQLite for Universal App Platform以及一款wrapper,如SQLitePCL.现在有了EntitfyFramewrok Core,我们 ...