使用scriptjs加载捆绑的react组件并在屏幕上呈现

时间:2019-05-30 07:58:27

标签: reactjs webpack-4

我已经使用web-pack捆绑了我的react组件,以下是我用来完成相同任务的webpack.config.js文件

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

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "webpack"),
        filename: "index_bundle.js",
        libraryTarget: "umd",
        library: "Lib",
        umdNamedDefine: true,
        globalObject: `(typeof self !== 'undefined' ? self : this)`
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: "babel-loader" },
            { test: /\.css$/, use: ["style-loader", "css-loader"] }
        ]
    },
    target: "web",
    mode: "production",
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]
};

我想在另一个React项目中使用它

我可以通过仅在本地复制inde_bundle.js文件并将其导入来完成此任务。但是现在我想从url加载文件,而我正在使用scriptjs

var scriptjs = require("scriptjs");
scriptjs.get(
    "https://s3.ap-south-1.amazonaws.com/hardik97122/index_bundle.js",
    function() {
        console.log(Lib);
        ReactDOM.render(<Lib />, document.getElementById("root"));
        // return <lib />;
    }
);

它不符合我的目的

应该从该URL呈现输出。也许我需要对Web Pack的配置进行一些更改,但是我不知道该怎么办。

0 个答案:

没有答案