部署使用 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 start 运行它，它使用 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"
  },

我的开发配置：

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

您可以尝试使用 babel-loader 并在 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']
    }
  }
]