ESLint 报错：Parsing error: The keyword 'import' is reserved，如何处理？

在使用 ES6 模块语法 import/export 开发前端项目时，经常会遇到这样的报错：Parsing error: The keyword 'import' is reserved。这是因为目前浏览器还不支持 ES6 模块语法，需要使用一些工具将代码转换成浏览器可识别的代码。本文将介绍解决这种报错的方法。

使用 Babel 转换代码

Babel 是一个 JavaScript 编译器，可以把 ES6 代码转换成 ES5 代码，从而使浏览器能够正确地识别和执行。可以通过下面的步骤使用 Babel 转换代码：

安装 Babel

# 安装 Babel CLI 工具
npm install -g babel-cli

# 安装 Babel 转码规则
npm install --save-dev babel-preset-es2015

创建 .babelrc 文件

{
  "presets": ["es2015"]
}

转换代码

执行以下命令即可将 ES6 代码转换成 ES5 代码：

babel src --out-dir lib

其中 --out-dir 参数指定转换后的代码存放目录，src 目录存放 ES6 代码。

使用 webpack 转换代码

webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它支持通过加载器（loader）和插件（plugin）来处理各种文件，包括 ES6 代码。

安装 webpack 和 babel-loader

# 安装 webpack 和 webpack-cli
npm install --save-dev webpack webpack-cli

# 安装 babel-loader 和 babel-core
npm install --save-dev babel-loader babel-core

# 安装 Babel 转码规则
npm install --save-dev babel-preset-es2015

配置 webpack.config.js

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

转换代码

执行以下命令即可将 ES6 代码转换成 ES5 代码，并打包到 dist/bundle.js 文件中：

webpack --mode production

使用 ESLint 忽略警告

在开发项目时，可以使用 ESLint 检测代码，并提示开发者是否存在语法错误和代码风格问题。但是，ESLint 默认情况下会警告报错：Parsing error: The keyword 'import' is reserved。在项目中使用 ES6 模块语法 import/export 时，可以通过配置 .eslintrc.js 文件忽略警告：

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

示例代码

ES6 代码

import { sum } from './math.js';

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

转换后的 ES5 代码

'use strict';

var _math = require('./math.js');

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

总结

ESLint 报错：Parsing error: The keyword 'import' is reserved 可以通过使用 Babel 或 webpack 将 ES6 代码转换成 ES5 代码，从而使浏览器能够正确地识别和执行。如果使用 ESLint 检测代码时出现报错，可以通过忽略警告的方式解决。

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