Question

我想导入使用Web Pack捆绑在一起的react组件。

我可以通过将任务本地复制到该文件夹然后像导入一样完成任务 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导入组件。

Answer 1

您可以使用微型应用程序进行描述。微型应用程序基本上只不过是在运行时从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

Answer 2

这不是您应该打包和部署React组件的方式。 AWS S3是用于存储要在Web上服务的文件的存储桶。目的不是通过项目共享代码文件。

您应该将React组件发布到NPM之类的注册表中。在将软件包发布到注册表之后，您应该可以通过执行npm install my_package之类的操作将软件包作为依赖项安装到应用程序中。

从URL加载React组件

2 个答案: