Reactjs 代码拆分时未定义Requirejs回调

我是一个新手，我有一个以

index.jsx

为入口点的ReactJS应用程序

// index.jsx

import React from 'react';
import ReactDOM from 'react-dom';


export function callBackForRequirejs() {
    return "testing";
}

当我通过RequireJS加载构建时，我会得到这些回调

require(["/path/to/bundle"], function(callback) {
    console.log(callback) // I get "callBackForRequirejs"
}, function(err){
    console.log(err)
});

但是当我进行代码拆分时，我在回调中没有定义，对于代码拆分，我使用这些配置

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "initial",
            }
        }
    }
}

更新：

实际上，我的react应用程序是一些外部应用程序的插件，外部应用程序通过RequireJS加载我的插件。外部应用程序中的代码如下所示

案例1：

require(['/pathof/my/react/plugin/bundle.js'],
    function(callbackwhenpluginloads){
        callbackwhenpluginloads()
    })

由于my bundle.js的大小非常大，所以我决定将其分为两部分：一部分来自

节点_模块

，另一部分来自

我的代码

现在外部插件加载我的react插件，如下所示

案例2：

require(['/pathof/my/react/plugin/bundle.js', 
'/pathof/my/react/plugin/vendor.js' ], function(callbackwhenpluginloads){
    callbackwhenpluginloads()  // callbackwhenpluginloads is undefined 
})

---

当外部应用程序在

中加载我的插件时，我得到了

未定义的

回调。似乎，对于代码拆分，您正在使用网页包。webpack和Required js并不太合得来

你应该试试香草JS

<script onload="handleOnLoad()" />

或者选择npm套餐。

---

事实上，根据启动的要求，您采用了以下方法，效果良好：

require(['/path/to/bundle.js'], function(callback) {
  console.log(callback) // you get callbackForRequireJS
}, function(error) {
  console.log(error)
});

现在你对项目进行了代码分割，所以你应该考虑这个“代码>卖主”。JS< /Cord>就像一个依赖于拆分<代码>捆绑。js< /Cord>文件。因此，您应该首先加载依赖项，然后运行其他拆分代码。因此，您的代码如下所示：

requirejs.config({
  paths: {
    reactApp: 'path/to/bundle.js'
  },
  deps: ['path/to/vendor.js'],
});


require(['reactApp'], function(callback) {
  console.log(callback) // it should works now
}, function(error) {
  console.log(error)
});

或者我不推荐另一种方式：

require(['path/to/vendor.js'], function() {
  require(['path/to/bundle.js'], function(callback) {
    console.log(callback) // it should works now
  }, function(bundleError) {
    console.log('bundleError', bundleError)
  });
}, function(vendorError) {
  console.log('vendorError', vendorError)
});