在前端开发中，我们常常使用 ECMAScript 6（ES6）的语法来让代码更加简洁、易读，提高开发效率。然而，有时候我们会在使用 ES6 的语法时遇到 ESLint 报错：unexpected token import 的情况，该如何解决呢？
问题分析
在 ES6 之前，我们使用 CommonJS 规范来管理模块。在 CommonJS 中，我们使用 require 来引入模块，使用 module.exports 来导出模块。而在 ES6 中，我们可以使用 import 和 export 来管理模块。这种方式非常方便，但是在一些环境下可能会出现无法解析的问题。
例如，我们在 Node.js 中使用 import 语法导入模块时，会出现如下的错误：
import express from 'express'; // SyntaxError: Unexpected token import
这是因为 Node.js 还不支持 ES6 的 import 语法，这时候我们需要使用 Babel 将代码转换为 ES5 的语法，再运行。
在前端开发中，我们常常使用 webpack 来打包我们的代码。由于 webpack 已经支持 ES6 的语法，我们可以安装并配置 babel-loader 来将 ES6 的语法转换为 ES5 的语法，但有时候配置不当会导致 ESLint 报错：unexpected token import。
解决方案
安装 babel-eslint
ESLint 默认只能检查 ES5 的语法，如果要检查 ES6 或更新的语法，则需要使用 eslint-plugin-babel 插件来帮助检查。该插件依赖 babel-eslint。
npm install eslint-plugin-babel babel-eslint --save-dev
修改 .eslintrc 文件
在 .eslintrc 中使用 babel-eslint 解析器并启用 eslint-plugin-babel 插件。
-- -------------------- ---- -------
-
--------- ---------------
---------- ----------
-------- -
---------------- --
----------------------------- --
------------------------- --
------------------------ --
------------- --
------------------------------ --
--------------------- -
-
-修改 webpack 配置文件
在 webpack 配置文件中，我们需要添加 babel-loader 来转换代码，并且需要安装并配置 @babel/preset-env 来转换 ES6 的语法。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--使用 @babel/polyfill
在使用 import 语法引入第三方模块时，如果该模块使用到了 ES6 的语法，我们同样需要使用 @babel/polyfill 来兼容。
import 'core-js/stable'; import 'regenerator-runtime/runtime';
示例代码
// index.js
import { sum } from './utility';
console.log(sum(1, 2));// utility.js
export function sum(a, b) {
return a + b;
}总结
ESLint 报错：unexpected token import 是由于环境不支持 ES6 的语法导致的。我们需要安装插件并配置 babel-eslint 解析器来检查 ES6 的语法，使用 babel-loader 在代码打包前将 ES6 的语法转换为 ES5 的语法。如果使用到了第三方模块中的 ES6 的语法，我们需要使用 @babel/polyfill 来兼容。掌握这些知识，可以让我们在开发中更加灵活使用 ES6 的语法，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65194d3d95b1f8cacd17c524