ベベルノードで開発されたアプリケーションをデプロイする

Question

私は初めてチュートリアルを始めてwebpackを使用していましたが、これをデジタルオーシャンに展開しようとしています。

私は次のように入力して、開発中のサーバを実行してきた 呼び出す

npm start 

：

babel-node devServer.js 

これはローカルに私のために正常に動作しますが、私は最初のデジタル海その上でそれを実行しようとすると、数分間働いて死ぬ。私はライブサーバ上で動いているbabel-nodeが推奨されていないことをどこかで読んだので、これはそれと関係していると思います。

私はpackage.jsonに、このラインから見ることができます：

私は私が展開ステップのいくつかの並べ替えを、やるべきことが、私はまだだけではNPM開始を使用して実行するために取得することができます

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

、 babel-node devServer.jsを使用しています

実際にビルドを実行した後、これをどのように実行しますか？私は間違って何をしていますか？ 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" 
    }, 

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

製品版の設定：

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

あなたはバベル・ローダーを使用し、中にビルドスクリプトを実行して試みることができますnpm start

あなたの package.jsonで

：

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

はまた、あなたのpackage.jsonに次の依存関係を含める：

あなた webpack.configで

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

：

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