时间戳

首页 > 解决方案 > 代码拆分时未定义Requirejs回调

reactjs - 代码拆分时未定义Requirejs回调

问题描述

我是RequireJS的新手我有一个 ReactJS 应用程序index.jsx作为入口点

// 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",
            }
        }
    }
}

更新：

实际上，我的反应应用程序是一些外部应用程序的插件，外部应用程序通过 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当外部应用程序加载我的插件时，我收到回调

标签： reactjsrequirejscode-splitting

解决方案

实际上，基于 RequireJS docs for start，您执行了以下方式并且效果很好：

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

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

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

推荐阅读