Perché la build di produzione dell'app React (con Webpack e Babel) utilizza un ambiente di sviluppo errato con HMR, che causa errori?

Question

Sto provando a creare una build di produzione del mio progetto React, ma seleziona la configurazione sbagliata.

Nella versione di sviluppo sto usando HMR (Sostituzione modulo caldo). Questo è configurato in .babelrc, sotto env > development > plugins. Quando si aggiunge un nodo aggiuntivo env > production sembra essere ignorato. Sta ancora utilizzando la configurazione di sviluppo con HMR, che causa un errore:

Uncaught Error: locals[0] does not appear to be a module object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using env section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr

Naturalmente ho controllato quell'informazione, ma tutto sembra giusto. Quando ho rimosso il plugin HMR dalla configurazione di sviluppo di .babelrc, funziona, dimostrando che sta effettivamente utilizzando la configurazione di sviluppo anziché la produzione. Ecco i miei file:

package.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": [] 
     } 
    } 
} 

Come si può vedere nel package.json > scripts > deploy, sto impostando anche in modo esplicito il BABEL_ENV a 'la produzione '.

Perché sta succedendo? Come posso assicurarmi che la build di produzione ignori i plugin HMR?

A proposito, la ricerca spesso conduce a issue #5 on the React-transform-HMR Github page, che è un thread lungo senza una soluzione chiara.

Modifica 2016.03.30: aggiunta della parte Babel della configurazione del mio webpack su richiesta. Modifica 2016.04.06: aggiunta di un intero file webpack su richiesta.

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' 
      } 
     ] 
    } 
}; 

Answer 1

& in guscio significa che verrà eseguito in background, quindi forse la vostra dichiarazione di variabile non ricade la roba build che accade allo stesso tempo . La cosa buona è che puoi semplicemente anteporre il comando alle dichiarazioni delle variabili.

Si potrebbe semplificare i comandi in questo modo:

"serve": "NODE_ENV=development webpack-dev-server --content-base bin/ --devtool eval --progress --colors --hot --inline", 
"deploy": "NODE_ENV=production BABEL_ENV=production webpack -p --config webpack.production.config.js" 

Answer 2

Si può semplicemente utilizzare il babel-preset-react-hmre.

.babelrc

{ 
    "presets": ["react", "es2015", "stage-0"], 
    "plugins": [ 
     "transform-decorators-legacy" 
    ], 
    "env": { 
     "development": { 
      "presets": ["react-hmre"] 
     } 
    } 
} 

webpack

{ 
     test: /\.js(x?)$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react', 'stage-0'], 
      plugins: ['transform-decorators-legacy'], 
      env: { 
       development: { 
       presets: ['react-hmre'] 
       } 
      } 
     } 
    } 

Answer 3

Sembra che non importa quale Babel mantiene utilizzando la sezione development del valore env specificato nel .babelrc. Quello che mi ha risolto il problema era usare un nome diverso da "sviluppo" e impostarlo come valore di BABEL_ENV.

"env": { 
    "dev": { 
     "plugins": [ 
     ] 
    }, 
    "production": { 
    } 
} 

Io uso conf separato per lo sviluppo. In plugin ho:

new webpack.DefinePlugin({ 
    'process.env': { 
    'NODE_ENV': JSON.stringify('development'), 
    'BABEL_ENV': JSON.stringify('dev') 
    } 
}), 

Answer 4

L'unica cosa che ha funzionato per me, è che ho scritto -

process.env.NODE_ENV = 'production'; 

all'inizio del mio file webpack.config.prod.js.