ruby-on-rails - 如何将“babel-preset-stage-2”加载器添加到 rails/webpacker/vue 应用程序？

Question

我有一个 rails 5 应用程序，我使用命令 rails webpacker:install:vue 安装了 vue。我只需要添加“babel-preset-stage-2”加载器，但我不知道该怎么做。

我阅读了这个文档，这是我在 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 文档，您应该能够执行以下操作：

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