在使用 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