Babel 编译 ES6 代码时遇到 "Unexpected token import" 的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在使用 ES6 进行前端开发时，我们通常使用 Babel 工具将 ES6 代码转换成 ES5 代码，以便在现代浏览器中运行。然而，在使用 Babel 编译 ES6 代码时，我们经常会遇到 "Unexpected token import" 的错误，这是由于 ES6 中的模块化语法 import 在 ES5 中并不被支持所导致的。本文将介绍如何解决这个问题。

解决方法

方法一：使用 Babel 插件

Babel 提供了 babel-plugin-transform-es2015-modules-commonjs 插件，可以将 ES6 的模块化语法转换成 ES5 的 CommonJS 格式，从而解决 "Unexpected token import" 的错误。我们只需要在 .babelrc 文件中添加该插件即可：

{
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

方法二：使用 Webpack

在使用 Webpack 进行前端开发时，我们可以使用 babel-loader 和 webpack 提供的 resolve.alias 配置项来解决 "Unexpected token import" 的错误。具体步骤如下：

安装 babel-loader 和 webpack：

npm install babel-loader webpack --save-dev

在 webpack.config.js 文件中添加以下配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

上述配置中，babel-loader 用于将 ES6 代码转换成 ES5 代码，@babel/preset-env 是一个 Babel 插件，用于根据当前环境自动确定需要转换的 JavaScript 特性，resolve.alias 则用于设置模块的别名，从而可以使用 import 导入模块。

在代码中使用 import 导入模块：
```
import { foo } from '@/utils';
```
上述代码中，@ 表示模块的根目录，utils 表示模块的相对路径。

示例代码

下面是一个使用 Webpack 和 Babel 编译 ES6 代码的示例：

// javascriptcn.com 代码示例
// src/utils.js
export function foo() {
  console.log('foo');
}

// src/index.js
import { foo } from '@/utils';

foo();

// javascriptcn.com 代码示例
// .babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};

在使用以上配置后，我们可以使用以下命令编译代码：

webpack --mode development

编译完成后，会在 dist 目录下生成 bundle.js 文件，我们可以在浏览器中打开该文件查看效果。

总结

在使用 ES6 进行前端开发时，我们需要使用 Babel 工具将 ES6 代码转换成 ES5 代码，以便在现代浏览器中运行。然而，在使用 Babel 编译 ES6 代码时，我们经常会遇到 "Unexpected token import" 的错误，这是由于 ES6 中的模块化语法 import 在 ES5 中并不被支持所导致的。本文介绍了两种解决方法：使用 Babel 插件和使用 Webpack。希望本文可以帮助读者更好地理解和使用 ES6。

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