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 mithilfeenv
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 Ihrerwebpack.config.js
- Datei? Ich benutze diereact-hmre
preset und das ist, wie ich werde es zuproduction
oderdevelopment
. - Für mich sieht es fein und eine ähnliche set-up für mich funktioniert, also muss es einige externe Problem hier 🙁
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das einzige, was für mich gearbeitet hat, ist, dass ich schrieb -
am Anfang meiner webpack.config.prod.js Datei.
Es scheint, dass, egal, was Babel hält mit der
development
Abschnitt derenv
angegebenen Wert in.babelrc
. Was das problem bei mir gelöst, war mit anderen Namen als 'Entwicklung' und festlegen, dass als Wert von BABEL_ENV.Separaten conf für die Entwicklung. In plugins, die ich habe:
&
im shell bedeutet, dass es im hintergrund ausgeführt, so dass vielleicht deine Variablendeklaration ist nicht gefangen von dem build-Material, das geschieht zur gleichen Zeit. Die gute Sache ist, dass Sie können, Schreibe einfach den Befehl mit der Variablen-Deklaration.Könnten Sie vereinfachen die Befehle wie diese:
&
war nicht das problem verursacht...Können Sie einfach die
babel-preset-reagieren-hmre
..babelrc
webpack