javascript - create - webpack 4

¿Por qué la compilación de producción de la aplicación React(con Webpack y Babel) usa env de desarrollo incorrecto con HMR, lo que causa errores?

Question

Intento crear una compilación de producción de mi proyecto React, pero elige la configuración incorrecta.

En la versión de desarrollo, estoy usando HMR (reemplazo de módulo caliente). Esto se configura en .babelrc, bajo los env > development > plugins . Cuando se agrega un nodo adicional env > production , parece que se ignora. Sigue usando la configuración de desarrollo con HMR, lo que causa un error:

Error no detectado: los locales [0] no parecen ser un objeto de module con la API de sustitución de módulo activo activada. Debe desactivar reaccionar-transformar-hmr en la producción mediante el uso de la sección env en la configuración de Babel. Vea el ejemplo en README: https://github.com/gaearon/react-transform-hmr

Por supuesto que he verificado esa información, pero todo parece estar bien. Cuando eliminé el plugin HMR de la configuración de desarrollo de .babelrc, funciona, demostrando que de hecho está usando la configuración de desarrollo en lugar de la producción. Aquí están mis archivos:

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

Como puede ver en package.json > scripts > deploy , incluso estoy configurando explícitamente BABEL_ENV en ''producción''.

¿Por qué está pasando esto? ¿Cómo me aseguro de que la compilación de producción ignore los complementos de HMR?

Por cierto, la búsqueda a menudo conduce al número 5 en la página React-transform-HMR Github , que es un hilo largo sin una solución clara.

Editar 2016.03.30: Agregar la parte de Babel de la configuración de mi paquete web a petición. Editar 2016.04.06: Agregar todo el archivo webpack a petición.

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 shell significa que se ejecutará en segundo plano, por lo que tal vez su declaración de variable no quede atrapada por las cosas de compilación que ocurren al mismo tiempo. Lo bueno es que puedes anteponer el comando con las declaraciones de variables.

Puede simplificar los comandos de esta manera:

"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

Puedes usar babel-preset-react-hmre .

.babelrc

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

paquete web

    {
        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

Parece que no importa lo que Babel siga utilizando la sección de development del valor de env especificado en .babelrc . Lo que me solucionó el problema fue usar un nombre que no sea ''desarrollo'' y establecerlo como el valor de BABEL_ENV.

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

Yo uso conf por separado para el desarrollo. En complementos tengo:

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

Answer 4

Lo único que funcionó para mí, es que escribí -

process.env.NODE_ENV = ''production'';

al comienzo de mi archivo webpack.config.prod.js.