Javascript 反应和保险丝盒：生产构建

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

插件指向该链接：

当我检查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的生产构建？（我想这是一个愚蠢的问题，但我就是看不到解决办法……）

---

提前谢谢！；）

还有一些你没有做的事情可能会引起React plugin的抱怨。在生产模式下，您可以应用以下babel转换进行其他优化：

。最有可能的原因是，道具类型只会给代码增加不必要的权重

---

我终于解决了

似乎一切都在量子插件中。通过此配置，网站验证为生产就绪：

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

为您完成了这项工作！我不太确定我传递给这个插件的配置，我将获取更多文档。感谢这一页，我找到了灵感：

---

希望这对将来的人有帮助

我已经试过了，但我一直收到来自React插件的警告…：（我想知道EnvPlugin，因为我从react的文档中读到，它应该可以工作。@sjahan尝试添加。请记住，

transform react jsx

变得多余。相同的结果：（我添加了它，然后尝试删除

transform react jsx

，没有任何进展：/