1. 问题描述
最近在使用 webpack2 进行前端项目开发时，遇到了一个使用 babel-loader 的错误。错误信息如下：
-- -------------------- ---- -------
----- -- --------------
------ ----- ------- ------ ------- ----------------- ------ ---- -------- ---------- -- ----
-- ----------------------------- --------------------------------------------------------------------
-- ---------- --------------------------------------------------------------------
-- ----------- --------------------------------------------------------------------
-- ---------------------------- --------------------------------------------------------------------
-- -------------------- ----------------------------------------------------------------
-- ----------------------- ---------------------------------------------------------------
-- ---------------------------- ---------------------------------------------------------------------------------------
-- ---------------- ---------------------------------------------------------------------------------------
-- ----------------------------------------------- --------------------------------------------------------------------------------------
-- ----- -------------------------------------------------------------具体的出错代码如下：
// src/index.js
const foo = () => console.log('Hello, world!');-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--2. 问题原因
通过查找资料和调查，我们可以发现该问题与 babel-loader 的版本升级有关。具体来说，如果你在 webpack2 中使用了 babel-loader 7.x 及以上的版本，你就会遇到上述错误。
这是因为从 babel-loader 7.x 开始，它使用了最新版本的 Babel（Babel 7），而 Babel 7 带来了一些改变。其中一项重大的改变是，它已经彻底移除了 babylon 这个 parser，而是采用了一个叫做 @babel/parser 的新 parser。
而 @babel/parser 却不兼容旧的 eslint 配置。因为 eslint 配置是用来给 babel-eslint 使用，而 babel-eslint 又是用来将一个字符串当做 AST，使 babel 插件工作的。
3. 解决方案
3.1 升级 babel-eslint
首先，我们需要升级 babel-eslint，以便与 @babel/parser 兼容。
npm install --save-dev babel-eslint@^10.1.0
// .eslintrc.js
module.exports = {
parser: 'babel-eslint',
// ...
};3.2 配置 babel-loader
接下来，我们需要在 webpack 配置中通过 options 属性将 babel-loader 的 parser 替换为 @babel/parser。
npm install --save-dev @babel/core @babel/preset-env babel-loader@^8.0.0-beta.0
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
------- ---------------
-
-
-
-
-
--3.3 配置 .babelrc
我们还需要在 .babelrc 文件中，配置一些新的插件、预设。
npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-export-default-from @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-export-default-from @babel/plugin-transform-runtime @babel/runtime @babel/preset-env
-- -------------------- ---- -------
-- --------
-
---------- -
-
--------------------
-
---------- -
----------- -
-- ----
----- - ----------
---- -- -- --
-
-
-
-
--
---------- -
--------------------------------------
-------------------------------------------
------------------------------------------
---------------------------------------------
-
----------------------------------
-
----------- -----
-
-
-
-4. 总结
通过以上的改动，我们就可以解决 babel-loader 升级后在 webpack2 中出现的错误。但是，这并不是一劳永逸的解决方案，因为在 babel 和 webpack 生态系统中，更新迭代非常快，需要我们保持警惕并及时跟进。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc0b0b5ad90b6d0423f81f