Javascript 如何将commonJs require语法和es模块导入语法包含在同一个捆绑包-网页包中

在标记为副本之前，我在询问之前搜索了一个答案，发现了这个答案：

问题是，被接受的答案指向现在有不同内容的网页文档

问题是： 我有一个Webpack版本为

4.41.2

的项目，作为一个前端，大约600个js/jsx文件都是用旧的

require

和

模块编写的。导出

语法，我想将它们更新为

导入/导出

语法（不是一次全部，因为这将花费很长时间）。当我尝试更新一个简单的文件时，如下所示：

"use strict";
var WebpackNotifierPlugin = require('webpack-notifier');
var webpack = require('webpack');
var path = require('path');

module.exports = [
    {
        mode: 'development',
        context: __dirname + "/app",
        entry: {
            'app': ["./main.jsx"],
            'widget': ["./Widget/Widget.jsx"],
            'admin': ["./Admin/Main.jsx"],
            'dashboard': ["./Dashboard/Main.jsx"],
            'signin': ["./SignIn/Main.jsx"],
            'surveys': ["./Surveys/Main.jsx"]
        },
        output: {
            filename: "[name].entry.js",
            path: __dirname + "/dist",
            publicPath: '/'
        },
        devtool: "eval-source-map",
        devServer: {
            hot: true,
            contentBase: './dist',
            host: "localhost",
            inline: true,
            port: 58852
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    use: ['babel-loader'],
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader']
                }
            ]
        },
        plugins: [
            new WebpackNotifierPlugin(),
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
        ],
        performance: {
            maxEntrypointSize: 10000000,
            maxAssetSize: 10000000
        }
    }
]

由此-

const React = require('react');

const Spinner = () => {
    return (
        <div className="vertical-align" style={{ "width": "100%", "height": "100%" }}>
            <div className="lds-ring">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    );
};

module.exports = Spinner;

---

我将非常感谢任何关于如何解决这个问题的建议。

这是最新的babel在将es模块传输到commonjs时的工作原理

以这段代码为例：

const Spinner = () => {
    return (
        <div></div>
    );
};

export default Spinner;

从上面传输的代码中可以看到，没有

module.exports

，只有

exports.default

，这意味着您必须使用

const{default:Spinner}=require（'./path/to/Spinner'）

而不是

const Spinner=require（'./path/to/Spinner'）

---

但请确保您可以在的帮助下解决此问题。

如何在

联系人列表中使用
微调器
？类似于
const-Spinner=require（'./path/to/Spinner'）
？@chenxsan是的，我这样做将
const{default:Spinner}=require（'./path/to/Spinner'）
修复您的问题吗？如果是，您可能需要考虑您建议的编辑，堆栈片段非常好，但我强烈建议不要在过程中添加不必要的前导缩进。如果手动操作很难，请考虑按下“整洁”按钮。如何使用“整洁”按钮？
const Spinner = () => {
    return (
        <div></div>
    );
};

export default Spinner;

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var Spinner = function Spinner() {
  return /*#__PURE__*/React.createElement("div", null);
};

var _default = Spinner;
exports.default = _default;