在前端开发中，我们无法绕开 Webpack 和 Babel 这样的技术。Webpack 是一个打包工具，它可以将多个模块打包成一个文件。而 Babel 则是一个用于 JavaScript 语法转换的工具，它可以将 ES6 语法转译为 ES5 语法，以兼容旧版本的浏览器。在我们的工作中，有时需要使用 Webpack 和 Babel 来进行开发，特别是我们使用了 ES6 语法后，需要将其转译为 ES5 语法。但是，有时候我们会遇到一个问题：Webpack 配置中的 require 引用无法被 Babel 转译。
问题的原因
我们知道，Webpack 是一个打包工具，它可以将多个模块打包成一个文件。在配置文件中，我们可以使用 require 和 import 关键字来引入模块。例如：
const path = require('path');
import _ from 'lodash';问题就出在 require 这个关键字上。它不是 ES6 中的语法，而是 CommonJS 模块的引用方式。在 ES6 中，我们应该使用 import 来引用模块。
因此，当我们使用 Babel 来将 ES6 语法转译为 ES5 语法时，Webpack 配置中的 require 引用就无法被转译，因为 Babel 只会转译 ES6 语法，而不会去管 CommonJS 模块的引用方式。
解决方案
既然我们已经知道了问题的原因，那么解决起来也就很简单了。我们只需要让 Babel 能够转译 CommonJS 模块的引用方式就可以了。
具体来说，我们需要安装一个叫做 babel-plugin-transform-es2015-modules-commonjs 的插件。安装完成后，在 .babelrc 文件中加入以下代码：
{
"plugins": [
"transform-es2015-modules-commonjs"
]
}这样，Babel 就可以将 CommonJS 模块的引用方式转译为 ES6 中的 import 方式了。也就是说，我们的代码可以在浏览器中正常运行，同时也能保证代码的规范性和可读性。
代码示例
为了更好地演示问题和解决方案，我在这里提供一个代码示例。假设我们有以下代码：
const path = require('path');
import _ from 'lodash';
console.log(_.join(['a', 'b', 'c'], '_'));
console.log(path.basename('/foo/bar/baz/asdf/quux.html'));这段代码使用了 require 引用 path 模块和 import 引用 lodash 模块。我们可以使用 Webpack 将其打包为一个文件，然后用 Babel 来将 ES6 语法转译为 ES5 语法。
首先，我们要安装必要的 package：
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime lodash --save-dev
接着，在 webpack.config.js 文件中加入以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- -----------------------------------
-
-
-
-
-
--这个配置文件中，我们使用了 babel-loader 来处理 JavaScript 文件，并加入了 @babel/preset-env 和 @babel/plugin-transform-runtime 两个插件。这些插件能够使 Babel 能够将 ES6 语法转译为 ES5 语法，并将 CommonJS 模块的引用方式转译为 ES6 中的 import 方式。
接着，我们在项目中新建 src/index.js 文件，并把上面提到的代码复制进去。最后，我们使用以下命令进行打包：
npx webpack --mode production
打包完成后，我们可以在 dist/bundle.js 文件中看到以下代码：
-- -------------------- ---- ------- ---- -------- --- ------- - ------------------------------------------ --- ----- - ---------------------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- - --------------- ------------------------- ---- ----- ------ --------------- -----------------------------------------------------------
这段代码中，我们可以看到引用了 lodash 和 path 两个模块。通过使用 Babel 和 Webpack，我们成功地将 require 引用转译为了 import 引用，同时也将 ES6 语法转译为了 ES5 语法。
总结
在本文中，我们探讨了 Webpack 配置中的 require 引用无法被 Babel 转译的原因，并提供了解决方案。我们可以使用 babel-plugin-transform-es2015-modules-commonjs 这个插件来使 Babel 能够转译 CommonJS 模块的引用方式，从而保证代码的规范性和可读性。
最后，我还提供了一个代码示例，希望对大家的学习和工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d24197b5eee0b5259a3585