求助：怎样配置webpack，能使编译后的文件符合umd规范，ReactFrame调用正常？

StaceyCode commented 4 years ago

问题描述： 我的webpack配置如下：

entry: {
    client: resolve('../app/client.js'),
  },
output: {
      path: resolve('../dist'),
      filename: '[name].[hash:4].js',
      chunkFilename: 'chunks/[name].[hash:4].js',
      libraryTarget: 'umd',
      umdNamedDefine: true,
      libraryExport: "default",
  },

编译后文件列表：

│  client.b518.js
│  common.b518.js
│  index.html
│  style.b518.css
├─chunks
│      chat.b518.js
│      echarts.b518.js
│      editor.b518.js
├─images
└─img

用ReactFrame引入client.b518.js，报错：ReferenceError: webpackJsonp is not defined，client.b518.js前半部分内容如下：

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else {
        var a = factory();
        for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
    }
})(typeof self !== 'undefined' ? self : this, function() {
return webpackJsonp([3],{

/***/ 1041:
/***/ (function(module, exports, __webpack_require__) {

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

求教：如何才能编译出让ReactFrame调用正常的react组件呢？目前有一个需求，在项目A里可以展示项目B、C、D.....的组件，正如作者大佬希望的那样，在React项目里如iframe一样展示组件。

y805939188 commented 4 years ago

您好，您试着把webpack配置中的output添加一项 publicPath: "组件地址"，看看能否解决这个问题。因为我看您好像用了懒加载的方式把一些文件给split出去了，webpack内部在使用jsonp的方式加载这些lazy的文件时候，会用output中的publicPath作为公共路径从而引入这些文件，由于您在用ReactFrame加载远程组件时候，ReactFrame所在的域可能和那些split出去的文件是不同的域，所以可能加载不出来那些文件。您给webpack的output添加publicPath，也许可以解决这个问题

StaceyCode commented 4 years ago

多谢多谢~~去掉懒加载之后的确可以了。组件里用了antd pro的dva框架，加载时报了如下错误：

Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(t)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(t)".

是不是不支持redux、dva这类框架？或者有什么办法可以解决嘛。

y805939188 commented 4 years ago

多谢多谢~~去掉懒加载之后的确可以了。组件里用了antd pro的dva框架，加载时报了如下错误：
Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(t)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(t)".
是不是不支持redux、dva这类框架？或者有什么办法可以解决嘛。

嗯呐，如果在组件里头用了redux之类的话，暂时可能会有些问题。目前这个react-vue-micro-frame比较适合加载一些不依赖于状态管理工具的独立的 “组件”。之后我会考虑给react-vue-micro-frame添加支持加载远程“应用”的功能。到时候redux什么的就可以正常加载了~

y805939188 / react-vue-micro-frame

求助：怎样配置webpack，能使编译后的文件符合umd规范，ReactFrame调用正常？ #1