如何在rails / webpacker / vue应用程序中添加“babel-preset-stage-2”加载程序？

Question

我有一个rails 5应用程序，我使用命令rails webpacker：install：vue安装了vue。我只需要添加“babel-preset-stage-2”加载器，但我无法弄清楚如何做到这一点。

我读了this documentation，这是我在config / webpack / loaders / vue.js中所做的（但它不起作用）：

const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { extractCSS }
  }]
}

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'babel-preset-stage-2'
  }]
}

Answer 1

你已经包含了2个module.exports，这不是commonJS模块的工作方式。如果您阅读webpack docs，您应该可以执行以下操作：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue(\.erb)?$/,
        loader: 'vue-loader',
        options: { extractCSS }
      },
      {
        test: /\.vue(\.erb)?$/,
        loader: 'babel-preset-stage-2'
      }
    ]
  }
}