tsx 文件使用 Babel 编译 "XXXX.externals" 报错解决指南
在前端开发中，我们常常会使用 TypeScript 或者 JavaScript 进行开发，而 Babel 则是一个很常用的转译工具，它可以将 ES6/ES2020 以及 TypeScript 编写的代码转化为可以在目标环境下运行的代码。在使用 Babel 进行编译时，我们可能会遇到一些问题，本文将介绍在编译 .tsx 文件时，遇到 “XXXX.externals” 报错的解决方案。
问题描述
当我们使用 Babel 进行编译时，出现了如下报错信息：
ERROR in ./src/components/Example.tsx [BABEL] E:\example\src\components\Example.tsx: Cannot find module 'XXXX.externals' (While processing preset: "E:\\example\\node_modules\\@babel\\preset-typescript\\lib\\index.js")
问题原因
在使用 Babel 进行 .tsx 文件的编译时，Babel 会去找一个叫做 “XXXX.externals” 的模块，但是它找不到这个模块，导致了报错。
解决方法
我们可以通过配置 exclude 和 include 来解决这个问题。
exclude：表示要被排除的文件或者文件夹，不需要编译。这个属性一般放在 babel-loader 配置项中。比如，我们把 node_modules 文件夹排除掉，不编译这个文件夹下面的模块。
include：表示只编译哪些文件或者文件夹，其它的不编译。这个属性也可以放在 babel-loader 配置项中。比如，我们只编译 src 目录下面的代码，而其它目录下面的代码都不需要编译。
那么，在我们的问题中，我们只需要把 “XXXX.externals” 这个模块排除掉即可。我们可以在 webpack.config.js 文件中进行这个配置，如下例所示：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
---- -
-
------- ---------------
-------- -
-------- ------------------------------
-------- ------
-------- -
--------------------
----------------------
--------------------------
--
-------- -
----------------------------------
-----------------------------------------
-
-
-
-
-
-
-
-在这个配置中，我们使用 exclude 将 node_modules 和 XXXX.externals 这两个文件夹都排除掉了，意味着这两个文件夹下面的代码都不会被编译。使用 include，我们只编译 src 目录下面的代码。
这样，问题就得到了解决。
总结
在前端开发中，使用 Babel 编译 TypeScript 或者 JavaScript 代码是很常见的操作，但是在使用过程中可能会遇到一些问题。在本文中，我们介绍了在编译 .tsx 文件时遇到 “XXXX.externals” 报错时的解决方法。在配置 babel-loader 时，我们可以使用 exclude 和 include 来控制哪些文件夹需要被排除或者包含，以达到想要的编译效果。我相信，本文对于大家的学习和实践都有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646e7415968c7c53b0ce4946