在使用 React 进行项目开发时，我们常常会使用 ES6 的语法，而 Babel 是一个流行的编译器，可以将 ES6 语法转换成 ES5 语法，使得我们可以在旧的浏览器或者环境中使用最新的语法特性，使得代码具有更好的可读性和可维护性。然而，有些情况下，Babel 编译 React 项目时会出现无法识别 Import 语句的问题，这时候我们需要对其进行一些配置和改动。
问题描述
在默认情况下，Babel 仅仅是一个 JavaScript 的编译器，它可以把 ES6 的语言特性，例如箭头函数，解构等等转换成 ES5 的语法，但是它并不能进行模块的导入与导出，也就是说，它无法识别 Import 语句。当我们在 React 项目中使用 Import 引入一个模块时，如果 Babel 没有被正确配置，就会导致编译失败，从而出现浏览器无法解析的现象。
例如，当我们使用以下的代码片段时，在编译时就会出现错误：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- - -- -- -
------ -
-----
--------- -----------
------
--
-
------ ------- ----Babel 处理这段代码时就会报错，提示无法识别 Import 语句。这是因为默认情况下，Babel 并不会识别 ES6 的 Import 语句，因此需要进行一些额外的配置。
解决方案
要解决这个问题，我们需要进行一些额外的配置来告诉 Babel 如何处理 Import 语句。在这里，我们可以使用 babel-plugin-transform-imports 插件来进行处理。
安装插件
首先，我们需要安装该插件，可以通过以下命令来进行安装：
npm install babel-plugin-transform-imports --save-dev
修改 .babelrc 配置文件
接下来，我们需要修改 .babelrc 配置文件，让 Babel 能够正确的识别 Import 语句。在 .babelrc 文件中，我们可以添加该插件到 plugins 部分中：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -- ------ --- -----
-
--
---------------------
--
---------- -
-
--------------------
-
------------------- -
------------ -----------------------------
-------------------- ----
-
-
-
-
-这里，我们使用了 transform-imports 插件，并且传入了一些配置项：
- transform：这个配置项用于描述如何去转换 Import 语句。在这个示例中，我们使用了 "react-router-dom/${member}" 来描述如何转换 Import 语句。这里面的 ${member} 将会被替换为我们引入的模块的具体位置。
- preventFullImport：这个配置项用于控制是否要把整个模块导入，如果为 true，则只导入我们需要的内容。
修改 Import 语句
最后，我们需要对我们的代码做一些修改，让它符合我们配置的转换规则。在我们的示例中，我们需要将 Import 语句改成：
import { BrowserRouter as Router, Route } from 'react-router-dom';这样就能够让 Babel 正确的处理 Import 语句了。
总结
在使用 React 进行开发时，如果出现 Babel 无法识别 Import 语句的问题，我们可以通过使用 babel-plugin-transform-imports 插件来进行解决。只需要安装插件并进行一些配置即可。这样，我们就能够愉快的使用 ES6 的语法，并且不用担心出现浏览器无法解析的现象了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64effc2df6b2d6eab39e8e43