使用Babel-loader无法识别import关键字问题解决

阅读时长 5 分钟读完

问题描述

在使用webpack构建前端项目时,可能会遇到使用Babel-loader无法识别ES6的import语法,导致编译错误的问题。例如,在以下代码中:

Babel默认只能处理ES6的部分语法,无法识别import语法,并且抛出类似于以下的错误:

解决方案

安装依赖库

首先,我们需要安装一些必要的依赖库:

  • babel-loader:Babel的Webpack插件,用于将ES6转换为ES5。
  • @babel/core:Babel的核心库,提供了Babel的API和工具链。
  • @babel/preset-env:Babel的预设,用于根据配置自动加载所需的插件。
  • webpack:打包工具。

配置Babel

在Webpack配置文件中,我们需要添加一个Babel的配置项:

-- -------------------- ---- -------
-------------- - -
  -- ---
  ------- -
    ------ -
      -
        ----- --------
        -------- ---------------
        ---- -
          ------- ---------------
          -------- -
            -------- ---------------------
          -
        -
      -
    -
  -
--

这个配置项的含义是:对于所有.js文件,使用Babel-loader进行转换,排除node_modules目录。其中,options.presets指定了加载的预设。

如果需要支持React语法,可以在presets中添加@babel/preset-react

配置package.json

package.json中,我们需要添加一个browserslist字段,用于指定要支持的浏览器范围:

-- -------------------- ---- -------
-
  ------- ---------
  ---------- --------
  ---------- -----
  --------------- -
    -- ----
    ----- - ---------
  --
  ------------------ -
    -------------- ----------
    -------------------- ----------
    --------------- ---------
    ---------- ----------
    -------------- --------
  --
  --------------- -
    -------- ----------
    ------------ ---------
  -
-

这个配置项的含义是:在支持率高于1%和最近两个版本的浏览器中,自动加载所需的Babel插件。

示例代码

假设我们有以下目录结构:

src/index.js文件:

src/app.js文件:

-- -------------------- ---- -------
------ ----- ---- --------

-------- ----- -
  ------ -
    ---------- -----------
  --
-

------ ------- ----

webpack.config.js文件:

-- -------------------- ---- -------
----- ---- - ----------------

-------------- - -
  ----- --------------
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- --------
  --
  ------- -
    ------ -
      -
        ----- --------
        -------- ---------------
        ---- -
          ------- ---------------
          -------- -
            -------- --------------------- ----------------------
          -
        -
      -
    -
  -
--

这个Webpack配置文件的

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/31098

纠错
反馈