Question

我第一次使用webpack，开始编写教程，但我一直试图将其部署到数字海洋。

我在开发期间通过输入

运行服务器

 babel-node devServer.js

哪个电话：

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

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

我可以从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"
  },

我应该做一些部署步骤，我这样做，但我仍然只能使用npm start运行它，它使用babel-node devServer.js

如何在构建之后实际运行此命令？我究竟做错了什么？

来自package.json：

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

Prod config：

#carousel-custom .carousel-inner > .item > a > img, 
#carousel-custom .carousel-inner > .item > img {
    margin: 0 auto;
}

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

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

1 个答案: