部署一个用babel-node开发的应用程序

Question

我第一次使用webpack，开始了一个教程，但是我试图将它部署到数字海洋。

我已经通过键入运行发展过程中的服务器

npm start 

的呼叫：

babel-node devServer.js 

这对我来说工作正常当地，但是当我尝试在数字海洋它第一次运行工作几分钟，然后死亡。我在某个地方读过，不推荐在现场服务器上运行babel-node，所以我想这与此有关。

我可以从该行看到的package.json：

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

，我应该做某种部署步骤，这是我做的，但是我还是只能得到它使用NPM开始运行，其中使用巴贝尔节点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" 
    }, 

我的开发配置：

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

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

你可以尝试使用巴贝尔装载机和运行构建脚本中npm start

在你package.json：

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

也包括在package.json以下依赖性：

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

在你webpack.config：

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