时间戳

首页 > 解决方案 > 从 url 加载反应组件

reactjs - 从 url 加载反应组件

问题描述

我想导入我使用 web pack 捆绑的反应组件。

我可以通过将其本地复制到该文件夹​​然后导入它来完成任务， import Any from '.dist/index' 它工作正常。但我想做的是将此 index.js 文件上传到某个地方，例如 Amazon s3。现在我无法以与上述相同的方式导入组件。

我的 webpack.config.js 文件，我曾经通过复制 index.js 和 index.css 文件来导出我在另一个项目中使用的 webpack 生成的捆绑组件

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index_bundle.js",
        libraryTarget: "commonjs2"
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: "babel-loader" },
            { test: /\.css$/, use: ["style-loader", "css-loader"] }
        ]
    },
    externals: {
        react: "commonjs react" 
    },
    mode: "production",
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]
};

我想从上传到 s3 的文件 url 导入组件。

标签： reactjswebpack-4

解决方案

你可以用微应用做你描述的事情。微型应用程序基本上只是一个在运行时从 url 延迟加载到主机应用程序中的组件。无需在设计时安装或导入组件。有一个可用的库可让您使用 HOC 组件执行此操作。

import React from 'react';
import ReactDOM from 'react-dom';
import MicroApp from '@schalltech/honeycomb-react-microapp';

const App = () => {
  return (
    <MicroApp
        config={{
          View: {
            Name: 'redbox-demo',
            Scope: 'beekeeper',
            Version: 'latest'
          }
        }}
      />
  );
});

export default App;

您可以在此处找到有关其工作原理的更多信息。

https://github.com/Schalltech/honeycomb-marketplace

推荐阅读