如何解决使用 Babel 编译 ES6 时出现的 SyntaxError: Unexpected token 问题-JavaScript中文网-JavaScript教程资源分享门户

问题描述

在使用 Babel 编译 ES6 代码时，经常会出现 SyntaxError: Unexpected token 的错误。这个错误的原因是因为 Babel 默认只转换语法，而没有转换 ECMAScript 新语法引入的新的 API，如 Promise、Generator 等。因此，导致在低版本浏览器或 Node.js 中使用转换后的代码时，会出现兼容性问题。

解决方案

解决这个问题的方法有两种：

安装插件：通过安装 Babel 的插件，实现对新语法引入的 API 的转换。
使用 polyfill：引入 polyfill 库，让低版本浏览器或 Node.js 也能够支持新语法引入的 API。

安装插件

为了让 Babel 能够转换新的 API，可以通过安装对应的 Babel 插件来实现。

以 @babel/polyfill 插件为例。

安装 @babel/polyfill 插件：

npm install @babel/polyfill --save-dev

在代码入口文件（如 index.js）中引入 @babel/polyfill 插件：

import '@babel/polyfill';

这样，@babel/polyfill 插件会自动将当前 JavaScript 环境中缺失的新语法引入的 API 转换成当前 JavaScript 环境所支持的 API。

使用 polyfill

polyfill 库是一种适用于低版本浏览器或 Node.js 的库，用来实现缺失的新语法引入的 API 功能。

以 core-js 库为例。

安装 core-js 库：

npm install core-js --save-dev

在代码入口文件（如 index.js）中引入需要的 polyfill：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

其中，core-js/stable 包含了所有新语法引入的 API 的垫片，而 regenerator-runtime/runtime 包含了 Generator 相关的 API 垫片。

这样，使用了 polyfill 库之后，新语法引入的 API 就可以在低版本浏览器或 Node.js 中使用了。

示例代码

为了演示 Babel 编译 ES6 时出现的 SyntaxError: Unexpected token 问题以及解决方法，我们可以创建一个简单的项目，并使用示例代码演示具体的解决方案。

创建项目

mkdir babel-demo
cd babel-demo
npm init -y

安装依赖

npm install babel-loader @babel/core @babel/preset-env webpack webpack-cli -D

安装 babel-loader、@babel/core、@babel/preset-env、webpack、webpack-cli。

创建 webpack.config.js 文件

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

// javascriptcn.com 代码示例
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

这个配置文件指定了入口文件、输出文件、以及 babel-loader 的配置。

在项目根目录下创建 src 目录，并添加 index.js 文件。

// javascriptcn.com 代码示例
const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Hello, Babel');
  }, 1000);
});

promise.then((data) => {
  console.log(data);
});

这个代码使用了 Promise。

构建项目

在命令行中执行以下命令，构建项目：

npx webpack

这个命令会生成 dist 目录及其输出文件。使用低版本浏览器或 Node.js 运行输出文件时，会出现 SyntaxError: Unexpected token 的错误。

我们可以尝试在低版本浏览器或 Node.js 中运行输出文件，看是否能成功。

解决问题

安装插件

在项目中安装 @babel/polyfill 插件。

npm install @babel/polyfill --save-dev

修改 src/index.js 文件，添加 import '@babel/polyfill'; 语句。

// javascriptcn.com 代码示例
import '@babel/polyfill';

const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Hello, Babel');
  }, 1000);
});

promise.then((data) => {
  console.log(data);
});

重新构建项目：

npx webpack

使用低版本浏览器或 Node.js 运行输出文件，看是否能成功。

使用 polyfill

在项目中安装 core-js 库。

npm install core-js --save-dev

修改 src/index.js 文件，使用 core-js 库来实现缺失的 API 功能。

// javascriptcn.com 代码示例
import 'core-js/stable';
import 'regenerator-runtime/runtime';

const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Hello, Babel');
  }, 1000);
});

promise.then((data) => {
  console.log(data);
});

重新构建项目：

npx webpack

使用低版本浏览器或 Node.js 运行输出文件，看是否能成功。

总结

Babel 编译 ES6 代码时出现 SyntaxError: Unexpected token 错误，通常是因为新语法引入的 API 第三方库未来得及兼容前导致，这时可以通过安装插件或使用 polyfill 库解决问题。使用 polyfill 库是一种更通用、更稳定、更灵活的解决方案，建议在项目中使用 polyfill 库来保证新语法引入的 API 的兼容性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6527cdba7d4982a6eba65ab4