如何使用 css + js 捆绑对一个大捆绑包做出反应

Question

我正在尝试构建一个动态加载的反应应用程序，它应该像插件一样按需加载到不同的网站中。

我需要首先将所有 javascript + CSS 捆绑到 one.js 文件中，然后它需要加载 React + ReactDOM 然后将我的应用程序注入某个占位符 div。

目前我坚持禁用 create-react-app 块拆分为多个 js + css 文件。

Answer 1

最后用 gulp 解决了

gulpfile.js：

    const gulp = require("gulp");
    const replace = require("gulp-replace");
    const concat = require("gulp-concat");
    const gap = require("gulp-append-prepend");
    const css2js = require("gulp-css2js");
    
    gulp.task("unite-css", () => {
      return gulp
        .src("./build/static/css/*.css")
        .pipe(concat("styles.css"))
        .pipe(css2js({ splitOnNewline: false }))
        .pipe(gulp.dest("./build/static/js"));
    });
    
    gulp.task("bundle", () => {
      return gulp
        .src("./build/static/js/*.js")
        .pipe(concat("bundle.js"))
        .pipe(replace("ReactDom", "ReactDOM"))
        .pipe(gulp.dest("./dist/"));
    });
    
    gulp.task("add-react", () => {
      return gulp
        .src("./dist/bundle.js")
        .pipe(gap.prependFile("./react-injector.js"))
        .pipe(gulp.dest("./dist"));
    });
    
    gulp.task("default", gulp.series("unite-css", "bundle", "add-react"));

反应注射器.js：

    function addCdnScript(url) {
      let script = document.createElement("script");
      script.src = url;
      document.body.appendChild(script);
    }
    addCdnScript("https://unpkg.com/react@17/umd/react.production.min.js");
    addCdnScript("https://unpkg.com/react-dom@17/umd/react-dom.production.min.js");

当然你仍然需要一个<div id="root"/>在你的 dom 中注入。