Search code examples
npmwebpackcoffeescriptuglifyjsvue-loader

Can Webpack build Vue template with coffee-loader?


When i try to run command npm run dev, but crush on npm run build I think that i need a pass param to uglifyjs or to vue-loader

Set Babel preset to es2015 does not resolve problem

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]

We use config such us

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 file code is

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

Solution

  • Resolution is install npm dependencies

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

    And add to .babelrc following lines

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