ESLint 报错:Parsing error: The keyword 'import' is reserved,如何处理?

阅读时长 4 分钟读完

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

使用 Babel 转换代码

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

安装 Babel

创建 .babelrc 文件

转换代码

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

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

使用 webpack 转换代码

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

安装 webpack 和 babel-loader

配置 webpack.config.js

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

转换代码

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

使用 ESLint 忽略警告

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

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

示例代码

ES6 代码

转换后的 ES5 代码

总结

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

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

纠错
反馈