Требовать js обратный вызов не определен при разделении кода - PullRequest
Новая
       73

Требовать js обратный вызов не определен при разделении кода

1 голос
/ 20 марта 2020

Я новичок ie до Требуется JS У меня есть приложение ReactJS с index.jsx в качестве точки входа 

// index.jsx

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


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

Когда я загружаю свой построить через Require JS Я получаю эти обратные вызовы 

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

ОБНОВЛЕНИЕ :

На самом деле, мое приложение реакции - это плагин для какого-то внешнего приложения, внешнее приложение загружает мой плагин через Require JS. Код во внешнем приложении выглядит примерно так:

case 1: 

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

Поскольку размер моего пакета очень велик. js очень большой, поэтому я решил разделить его на две части. один из node_modules и один из my code

Теперь внешний плагин загружает мой реактивный плагин примерно так

case 2: 

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

I ' я получаю undefined обратный вызов, когда внешнее приложение загружает мой плагин в

Ответы [ 2 ]

2 голосов
/ 26 марта 2020

На самом деле, на основе Require JS docs для запуска вы проделали следующий путь, и он работает хорошо: 

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)
});
0 голосов
/ 24 марта 2020

Кажется, для разделения кода вы используете веб-пакет. Webpack и требует js, на самом деле не ладят.

вы должны попробовать вместо этого ваниль JS. 

<script onload="handleOnLoad()" />

или go для пакета npm. Сценарий реагирования-загрузки - npm

...