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