如何将“ 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'
      }
    ]
  }
}