babel-core 在使用独立包构建时的 "Unexpected token import" 问题解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用 babel 来转换 ES6+ 的代码，使其在旧版浏览器中也能够正常运行。而 babel-core 作为 babel 的核心模块，可以将 ES6+ 的代码转换为 ES5 的代码。但是在使用 babel-core 独立包构建时，可能会遇到 "Unexpected token import" 的问题。

问题描述

当使用 babel-core 独立包构建时，如果我们的代码中使用了 ES6 的 import 语句，就会出现 "Unexpected token import" 的错误。例如，我们有以下的代码：

import { sum } from './math';

console.log(sum(1, 2));

当我们使用 babel-core 独立包构建时，会出现以下的错误：

SyntaxError: Unexpected token import

这是因为 Node.js 中默认不支持 ES6 的 import 语句，需要使用 babel 进行转换后才能正常运行。

解决方法

要解决这个问题，我们需要使用 babel-preset-env 和 babel-plugin-transform-runtime 这两个插件。babel-preset-env 可以根据目标环境自动加载所需的插件，而 babel-plugin-transform-runtime 可以将 ES6 的语法转换为 ES5 的语法。接下来，我们来一步步实现这个解决方法。

安装依赖

我们需要安装以下的依赖：

npm install --save-dev babel-core babel-preset-env babel-plugin-transform-runtime

配置 .babelrc 文件

在项目根目录下创建 .babelrc 文件，并添加以下内容：

-- -------------------- ---- -------
-
  ---------- -
    -
      ------
      -
        ---------- -
          ------- ---------
        -
      -
    -
  --
  ---------- -
    -------------------
  -
-

这里我们使用 env preset，并设置 targets 为 node 的当前版本。同时，我们使用 transform-runtime plugin 来转换 ES6 的语法。

修改构建命令

在 package.json 文件中，我们需要修改构建命令，使其使用 babel-core 进行构建。例如：

{
  "scripts": {
    "build": "babel src -d dist"
  }
}

这里我们使用 babel 命令，将 src 目录下的代码转换为 ES5 的代码，并输出到 dist 目录中。

构建代码

现在我们可以运行以下命令来构建代码：

npm run build

构建完成后，我们可以看到代码已经被转换为 ES5 的代码，并且可以在旧版浏览器中正常运行。

总结

通过上述的方法，我们可以解决使用 babel-core 独立包构建时出现 "Unexpected token import" 的问题。同时，我们也学习了如何使用 babel-preset-env 和 babel-plugin-transform-runtime 来转换 ES6 的语法。这对于我们开发和维护旧版浏览器的网站和应用程序非常有指导意义。

示例代码

以下是一个示例代码，用于演示如何使用 babel-core 独立包构建：

src/math.js

export function sum(a, b) {
  return a + b;
}

src/index.js

import { sum } from './math';

console.log(sum(1, 2));

.babelrc

-- -------------------- ---- -------
-
  ---------- -
    -
      ------
      -
        ---------- -
          ------- ---------
        -
      -
    -
  --
  ---------- -
    -------------------
  -
-

package.json

-- -------------------- ---- -------
-
  ---------- -
    -------- ------ --- -- -----
  --
  ------------------ -
    ------------- ----------
    --------------------------------- ----------
    ------------------- --------
  -
-

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/660c953bd10417a222cd7f51