Babel 7 中的外部导入不会被转译

Java

Babel 7 中的外部导入不会被转译

Babel 是一个非常流行的 JavaScript 编译器，用于将最新的 JavaScript 语法转译为可在旧版浏览器中运行的兼容代码。然而，自从 Babel 7 版本发布以来，一个重要的变化就是它不再转译外部导入的模块。

在过去的版本中，Babel 会将所有的 import 语句转译为浏览器可识别的代码。但是在 Babel 7 中，它默认将 import 语句保留为原始代码，而不对其进行转译。这意味着你需要确保你的代码运行环境支持模块导入。

为什么外部导入不再被转译？

这个变化是出于性能和开发者体验的考虑。传统上，Babel 将所有的 import 语句转译为 require 语句，这意味着每次导入一个模块时都需要执行一次 require 操作。而现代浏览器已经原生支持 import 语句，因此不再需要进行转译。

如何处理外部导入？

如果你的代码运行环境支持原生的模块导入，那么你无需做任何额外的工作。你可以直接在代码中使用 import 语句，Babel 将会保留它们原样。

然而，如果你的代码运行环境不支持原生的模块导入，你需要使用额外的工具来处理这些导入语句。一个常见的工具是 Webpack，它可以将你的代码打包成一个或多个浏览器可识别的文件。

案例代码：

下面是一个简单的案例代码，展示了如何处理外部导入。

首先，我们需要安装 Babel 相关的依赖：

npm install @babel/core @babel/cli @babel/preset-env

然后，在项目根目录下创建一个名为 .babelrc 的文件，内容如下：

{
  "presets": ["@babel/preset-env"]
}

接下来，我们创建一个名为 index.JS 的文件，内容如下：

Javascript
import axIOS from 'axIOS';
axIOS.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

最后，我们可以使用 Babel 命令行工具将代码转译成浏览器可识别的代码：

npx babel index.JS -o bundle.JS

现在，我们可以在浏览器中引入 bundle.JS 文件，并且可以正常运行我们的代码了。

Babel 7 不再转译外部导入的模块，这是出于性能和开发者体验的考虑。如果你的代码运行环境支持原生的模块导入，你不需要做任何额外的工作。但如果不支持，你可以使用工具如 Webpack 来处理导入语句。希望本文能够帮助你理解 Babel 7 中外部导入不被转译的特性，并且能够顺利处理你的代码。