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

【问题标题】：How to add "babel-preset-stage-2" loader to a rails/webpacker/vue app?如何将“babel-preset-stage-2”加载器添加到 rails/webpacker/vue 应用程序？
【发布时间】：2017-12-21 19:19:56
【问题描述】：

我有一个 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'
  }]
}

【问题讨论】：

标签： ruby-on-rails webpack ruby-on-rails-5 babeljs webpacker

【解决方案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'
      }
    ]
  }
}

【讨论】：