Webpack 可以用 coffee-loader 构建 Vue 模板吗？

Question

当我尝试运行命令 npm 运行 dev，但迷恋 npm 运行 build 我想我需要一个传递给 uglifyjs 或 vue-loader

的参数

将 Babel 预设设置为 es2015 无法解决问题

ERROR in build.js from UglifyJs
Unexpected token: operator (>) [./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/coffee/forms/table_class_selection.vue:28,44][build.js:19990,120]

我们使用这样的配置

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.coffee$/,
        use: {
          loader: 'coffee-loader',
          options: {
            transpile: {
              presets: ['env']
            }
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
      ...
    ]
  }
  ...

}

Vue文件代码为

<template>
...
</template>
<script lang="coffee">
   ...
</script>

Answer 1

解决方案是安装 npm 依赖项

npm i babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props -D

并添加到 .babelrc 以下行

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
  "plugins": ["transform-vue-jsx"]
}

Webpack 可以用 coffee-loader 构建 Vue 模板吗？

Can Webpack build Vue template with coffee-loader?

npm

webpack

coffeescript

uglifyjs

vue-loader