React 和 fuse-box：生产构建答案

【问题标题】：React and fuse-box: production buildReact 和 fuse-box：生产构建
【发布时间】：2017-06-25 12:28:07
【问题描述】：

我的问题很简单：我正在使用 Fusebox 开发一个简单的 React 应用程序。在我的 Chrome 浏览器中，我有一个 React 插件，它告诉我我没有运行生产构建（即使我尝试运行生产构建）。

该链接上的插件点：https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build

当我检查 webpack 时，唯一要做的就是运行将 NODE_ENV 设置为 'production' 的所有内容并添加 Uglify 插件。

当我在 Fusebox 中执行相同操作时，我不断收到关于“未运行生产构建”的相同警告，因此我认为有问题。

这是我的 fuse.js：

const { FuseBox, BabelPlugin, CSSPlugin, EnvPlugin, UglifyJSPlugin, WebIndexPlugin } = require("fuse-box");

const prod = true;

const fuse = FuseBox.init({
    homeDir: "src",
    output: "docs/$name",
    sourceMaps: !prod,
    plugins: [
        EnvPlugin({ NODE_ENV: prod ? 'production' : 'development' }),
        CSSPlugin(),
        BabelPlugin({
            config: {
                sourceMaps: !prod,
                presets: [ "es2015" ],
                plugins: [ "transform-react-jsx" ],
            }
        }),
        WebIndexPlugin({ path: ".", template: 'src/index.html' }),
        prod && UglifyJSPlugin()
    ]
});

if(!prod) {
    fuse.dev();
}

let vendor = fuse.bundle("vendor.js").instructions("~index.js");
let app = fuse.bundle("app.js").instructions(">[index.js]");

if(!prod) {
    app.watch().hmr();
}

fuse.run();

你知道为什么我仍然收到警告吗？我该如何解决这个问题以获得 React 的生产版本？（我想这是一个愚蠢的问题，但我在这里看不到解决方案......）提前致谢！ ;)

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

还有一些你没有做的事情可能会导致 React 插件的抱怨。在生产模式下，您可以应用以下 babel 转换进行额外优化：

"transform-react-remove-prop-types"。最有可能的原因是，道具类型只会给您的代码增加不必要的权重。
"transform-react-constant-elements"
"transform-react-inline-elements"

【讨论】：

我已经尝试过了，但我不断收到来自 React 插件的警告... :( 我想知道 EnvPlugin，因为从我从 react 的文档中读到的内容来看，它应该可以工作。跨度>
@sjahan 也尝试添加babel-preset-react。请记住，transform-react-jsx 变得多余。
相同的结果:(我已经添加了它，然后我尝试删除transform-react-jsx，没有进展：/

【解决方案2】：

我终于解决了！

似乎一切都在 Quantum 插件中。使用此配置，网站被验证为生产就绪：

const { FuseBox, BabelPlugin, CSSPlugin, QuantumPlugin, WebIndexPlugin } = require('fuse-box');

const prod = true;

const fuse = FuseBox.init({
    homeDir: 'src',
    output: 'docs/$name',
    sourceMaps: !prod,
    plugins: [
        CSSPlugin(),
        BabelPlugin({
            config: {
                sourceMaps: !prod,
                presets: [ 'es2015' ],
                plugins: [ 'transform-react-jsx' ]
            }
        }),
        WebIndexPlugin({ path: '.', template: 'src/index.html' }),
        prod && QuantumPlugin({
            removeExportsInterop: false,
            uglify: true
        })
    ]
});

if(!prod) {
    fuse.dev();
}

let vendor = fuse.bundle('vendor.js').instructions('~index.js');
let app = fuse.bundle('app.js').instructions('>[index.js]');

if(!prod) {
    app.watch().hmr();
}

fuse.run();

无需添加EnvPlugin 和UglifyPlugin，QuantumPlugin 为您完成工作！我不太确定我传递给这个插件的配置，我会获取更多文档。感谢这个页面，我找到了灵感：https://github.com/fuse-box/react-example/blob/master/fuse.js。

希望这对将来的某人有所帮助！

【讨论】：