Déploiement d'une application développée avec babel-node

Question

J'ai utilisé webpack pour la première fois, en commençant par un tutoriel, mais je suis bloqué en essayant de le déployer dans l'océan numérique.

Je dirige le serveur au cours du développement en tapant

npm start 

qui appelle:

babel-node devServer.js 

Cela fonctionne bien pour moi localement, mais lorsque je tente de l'exécuter sur l'océan numérique en premier travaille pendant quelques minutes, puis meurt. J'ai lu quelque part que l'exécution de babel-node sur un serveur live n'est pas recommandée, donc je suppose que c'est quelque chose à voir avec ça.

Je peux voir à partir de cette ligne package.json:

"build:webpack": "NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js", 

que je devrais faire une sorte de l'étape de déploiement, ce que je fais, mais je peux encore le faire que de courir avec le départ de NPM, qui utilise babel-node devServer.js

Comment l'exécuter réellement après avoir fait la construction? Qu'est-ce que je fais mal?

De package.json:

"scripts": { 
    "build:webpack": "NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js", 
    "build": "npm run clean && npm run build:webpack", 
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js \"test/**/*@(.js|.jsx)\"", 
    "clean": "rimraf dist", 
    "start": "babel-node devServer.js", 
    "tunnel": "browser-sync start --proxy localhost:7770 --tunnel wesbos", 
    "test:watch": "npm run test -- --watch" 
    }, 

Ma config dev:

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './client/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    resolve: { 
    root: [ 
     path.resolve('./client') 
    ], 
    alias: { 

    }, 
    }, 
    module: { 
    loaders: [ 
    // js 
    { 
     test: /\.js$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'client') 
    }, 
    // CSS 
    { 
     test: /\.styl$/, 
     include: path.join(__dirname, 'client'), 
     loader: 'style-loader!css-loader!stylus-loader' 
    } 
    ] 
    } 
}; 

config Prod:

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'source-map', 
    entry: [ 

    './client/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': "'production'" 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     warnings: false 
     } 
    }) 
    ], 
    resolve: { 
    root: [ 
     path.resolve('./client') 
    ], 
    alias: { 

    }, 
    }, 
    module: { 
    loaders: [ 
    // js 
    { 
     test: /\.js$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'client') 
    }, 
    // CSS 
    { 
     test: /\.styl$/, 
     include: path.join(__dirname, 'client'), 
     loader: 'style-loader!css-loader!stylus-loader' 
    } 
    ] 
    } 
}; 

Answer 1

Vous pouvez essayer d'utiliser babel-chargeur et l'exécution du script de construction dans npm start

Dans votre package.json:

"start": "npm run build && babel-node --presets es2015 devServer.js"

comprennent également les dépendances suivantes dans votre package.json:

"babel-loader": "^6.2.0", 
"babel-preset-es2015": "^6.3.13", 

Dans votre webpack.config:

loaders: [ 
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', 
    query: { 
     presets: ['react', 'es2015'] 
    } 
    } 
]