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

Question

我是 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 app是一些外部app的插件，外部app通过RequireJS加载我的插件。外部应用程序中的代码是这样的

案例 1：

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

由于我的 bundle.js 非常大，所以我决定将它分成两部分，一部分来自 node_modules，另一部分来自 my code

现在外部插件加载我的反应插件是这样的

案例 2：

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

当外部应用程序在

中加载我的插件时，我收到 undefined 回调

Answer 1

看来，对于代码拆分，您正在使用 webpack。 webpack 和 require js 不太合得来。

你应该试试 vanilla JS。

<script onload="handleOnLoad()" />

或者使用 npm 包。 react-load-script - npm

Answer 2

实际上，基于 RequireJS docs 开始你做了以下方式并且效果很好：

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

现在您对项目进行了代码拆分，因此您应该考虑 vendor.js 就像拆分 bundle.js 文件的依赖项。所以你应该先按照 this example 加载依赖项，然后运行其他拆分代码。所以你的代码如下所示：

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)
});

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

Requirejs callback undefined on code splitting

requirejs

reactjs

code-splitting