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

问题描述

在标记为重复之前，我在提问之前搜索了一个答案，我找到了这个： Is it possible to use both "require" and "import" together with Webpack?

问题是已接受的答案指向现在内容不同的 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
        }
    }
]

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

解决方法

这是最新的 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 的帮助下解决这个问题。