在使用 ES6 进行前端开发时，我们通常使用 Babel 工具将 ES6 代码转换成 ES5 代码，以便在现代浏览器中运行。然而，在使用 Babel 编译 ES6 代码时，我们经常会遇到 "Unexpected token import" 的错误，这是由于 ES6 中的模块化语法 import 在 ES5 中并不被支持所导致的。本文将介绍如何解决这个问题。
解决方法
方法一：使用 Babel 插件
Babel 提供了 babel-plugin-transform-es2015-modules-commonjs 插件，可以将 ES6 的模块化语法转换成 ES5 的 CommonJS 格式，从而解决 "Unexpected token import" 的错误。我们只需要在 .babelrc 文件中添加该插件即可：
{
"plugins": [
"transform-es2015-modules-commonjs"
]
}方法二：使用 Webpack
在使用 Webpack 进行前端开发时，我们可以使用 babel-loader 和 webpack 提供的 resolve.alias 配置项来解决 "Unexpected token import" 的错误。具体步骤如下：
安装
babel-loader和webpack：npm install babel-loader webpack --save-dev
在
webpack.config.js文件中添加以下配置：-- -------------------- ---- ------- -------------- - - -- --- ------- - ------ - - ----- -------- -------- --------------- ---- - ------- --------------- -------- - -------- --------------------- - - - - -- -------- - ------ - ---- ----------------------- ------ - - -上述配置中，
babel-loader用于将 ES6 代码转换成 ES5 代码，@babel/preset-env是一个 Babel 插件，用于根据当前环境自动确定需要转换的 JavaScript 特性，resolve.alias则用于设置模块的别名，从而可以使用import导入模块。在代码中使用
import导入模块：import { foo } from '@/utils';上述代码中，
@表示模块的根目录，utils表示模块的相对路径。
示例代码
下面是一个使用 Webpack 和 Babel 编译 ES6 代码的示例：
-- -------------------- ---- ------- -- ------------ ------ -------- ----- - ------------------- - -- ------------ ------ - --- - ---- ---------- ------
-- -------------------- ---- -------
-- --------
-
---------- -
-------------------
-
-
-- -----------------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--
-------- -
------ -
---- ----------------------- ------
-
-
--在使用以上配置后，我们可以使用以下命令编译代码：
webpack --mode development
编译完成后，会在 dist 目录下生成 bundle.js 文件，我们可以在浏览器中打开该文件查看效果。
总结
在使用 ES6 进行前端开发时，我们需要使用 Babel 工具将 ES6 代码转换成 ES5 代码，以便在现代浏览器中运行。然而，在使用 Babel 编译 ES6 代码时，我们经常会遇到 "Unexpected token import" 的错误，这是由于 ES6 中的模块化语法 import 在 ES5 中并不被支持所导致的。本文介绍了两种解决方法：使用 Babel 插件和使用 Webpack。希望本文可以帮助读者更好地理解和使用 ES6。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a83a395b1f8cacd4dd780