Warum nicht den Aufbau der Produktion zu Reagieren-app (mit Webpack und Babel) verwenden falsche Entwicklung env mit HMR, die die Fehler verursacht?

Ich versuche zu schaffen, ein production-build von meinem Projekt Reagieren, aber es nimmt die falsche Konfiguration.

In der development-version, die ich verwende HMR (Hot-Modul-Ersatz). Dieser konfiguriert ist .babelrc, unter env > development > plugins.
Beim hinzufügen von zusätzlichen Knoten env > production es scheint, um ignoriert zu werden. Es ist immer noch mit der Entwicklung Konfiguration mit HMR, die einen Fehler verursacht:

Nicht abgefangener Fehler: die einheimischen[0] nicht angezeigt wird, um ein module Objekt mit
Hot-Modul-Ersatz-API aktiviert. Sollten Sie deaktivieren
reagieren-transform-hmr in der Produktion mithilfe env Abschnitt in Babel
- Konfiguration. Siehe das Beispiel in der README-Datei: https://github.com/gaearon/react-transform-hmr

Natürlich habe ich überprüft, dass die Informationen, es scheint aber alles richtig.
Wenn ich entfernt die HMR-plugin aus .babelrc die Entwicklung der config, es funktioniert, beweist es in der Tat mit der Entwicklung der config statt der Produktion.
Hier meine Dateien:

Paket.json

{
  "name": "myproject",
  "main": "index.js",
  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack-dev-server --content-base bin/--devtool eval --progress --colors --hot --inline",
    "deploy": "cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack.production.config.js"
  }
  //dependencies omitted in this example
}

.babelrc

{
    "presets": ["react", "es2015", "stage-0"],
    "plugins": [
        ["transform-decorators-legacy"]
    ],
    "env": {
        "development": {
            "plugins": [
                ["react-transform", {
                    "transforms": [{
                        "transform": "react-transform-hmr",
                        "imports": ["react"],
                        "locals": ["module"]
                    }]
                }]
            ]
        },
        "production": {
            "plugins": []
        }
    }
}

Wie Sie sehen können, in package.json > scripts > deploy bin ich sogar explizit die Einstellung der BABEL_ENV zu 'Produktion'.

Warum ist das passiert? Wie kann ich sicherstellen, dass die Produktion aufzubauen, ignoriert die HMR-plugins?

Durch die Art und Weise, die Suche führt oft zu Ausgabe #5 auf dem Reagieren-transform-HMR Github-Seite, das ist ein langer thread, ohne eine klare Lösung.

Bearbeiten 2016.03.30: Hinzufügen der Babel Teil von meinem webpack config auf Anfrage.
Edit 2016.04.06: Hinzufügen von ganzen webpack-Datei auf Anfrage.

webpack.production.config.js

require('es6-promise').polyfill();
var path = require('path');

module.exports = {
    entry: './main.jsx',
    context: __dirname + path.sep + 'src',
    output: {
        path: path.resolve(__dirname, './bin'),
        filename: 'index.js'
    },
    devServer: {
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /\.js(x?)$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: [['transform-decorators-legacy']]
                }
            },
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'style-loader!css-loader!sass-loader?sourceMap'
            }
        ]
    }
};
  • Auf welchem Betriebssystem laufen Sie ?
  • Ich bin auf OSX, aber mein Teamkollege ist auf Windows. Ich werde ändern Sie die Skript-Zeilen, wie wir mit cross-env jetzt.
  • Könnte Sie zeigen das webpack config nur um sicher zu sein ?
  • Fertig, nur der Babel-loader-Modul Teil nehme ich an?
  • Haben Sie versucht, die Einstellung BABEL_ENV innerhalb Ihrer webpack.config.js - Datei? Ich benutze die react-hmre preset und das ist, wie ich werde es zu production oder development.
  • Für mich sieht es fein und eine ähnliche set-up für mich funktioniert, also muss es einige externe Problem hier 🙁

InformationsquelleAutor Micros | 2016-03-22
Schreibe einen Kommentar