vue webpack uglify - 箭头函数

Question

在构建包含箭头函数的 Vue 项目时，webpack 的 UglifJsPlugin 出现此错误：

Unexpected token: operator (>)

示例：

app.js

import Vue from 'vue';
import HelloWorldComponent from "./HelloWorld.vue";

new Vue({
  el: '#app'
  ,render: r => r(HelloWorldComponent)
});

HelloWorld.vue

<template>
    <div>{{message}}</div>
</template>

<script>
const data = { message: "Hello World" }
export default {
    data() { return data }
}
</script>

webpack.config.js

const webpack = require('webpack');
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const output = {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.js'
};
const vueLoaderRule = {
    test: /\.vue$/,
    loader: 'vue-loader'
};
const uglifyJsPlugin = new UglifyJsPlugin({
    include: /\.js$/,
    minimize: true
});

module.exports = {
    entry: './app.js'
    ,output: output
    ,module: {rules: [ vueLoaderRule ]}
    ,plugins: [ uglifyJsPlugin ]
}

注意：我的问题被标记为与此重复：
1）与Vue无关
2) 它是关于使用箭头函数作为 class 成员，我的问题不是

Answer 1

现在，UglifyJsPlugin不支持 ES6 功能（箭头函数），因此您必须先使用 babel 将 ES6 代码编译为 ES5，然后在其中使用 UglifyJsPlugin

vue webpack uglify - 箭头函数

vue webpack uglify - arrow functions

uglifyjs

webpack

vue.js

arrow-functions