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

【问题标题】：how to bundle react to one big bundle with css + js如何使用 css + js 捆绑对一个大捆绑包做出反应
【发布时间】：2021-05-02 16:17:00
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs webpack react-create-app

【解决方案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"));

react-injector.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");

当然，你仍然需要在你的 dom 中使用 <div id="root"/> 来注入。

【讨论】：