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