如何在同一个包中包含 commonJs 需要语法和 es 模块导入语法 - webpack

Question

在标记为重复之前，我在提问之前搜索了一个答案，我找到了这个：

问题是接受的答案指向现在内容不同的 webpack 文档。

问题：

我有一个 Webpack 版本 4.41.2 的项目，React 作为前端，大约 600 个 js/jsx 文件都是用旧的 require 和 module.exports 语法编写的，我想要将它们更新为 import/export 语法（不是一次全部更新，因为这将永远持续）。当我尝试像这样更新一个简单的文件时：

由此-

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;

对此-

import React from '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>
    );
};

export default Spinner;

应用程序崩溃，并出现以下错误：

ContactList 是呈现 Spinner 组件的组件。

我的 webpack.config.js 看起来像这样：

"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
        }
    }
]

对于如何解决此问题的任何建议，我将非常感谢。

Answer 1

这是最新的babel将es模块转commonjs的方式

以这段代码为例：

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

export default Spinner;

Babel 会transpile it变成：

"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;

正如你从上面的转译代码中看到的，没有module.exports，只有exports.default，这意味着你必须使用const {default: Spinner} = require('./path/to/Spinner')而不是const Spinner = require('./path/to/Spinner')。

但是你可以在 https://www.npmjs.com/package/babel-plugin-add-module-exports 的帮助下解决这个问题。

如何在同一个包中包含 commonJs 需要语法和 es 模块导入语法 - webpack

How can Include both commonJs require syntax and es modules import syntax in the same bundle - webpack

javascript

import

commonjs

reactjs

webpack

问题：