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 ]
}

注意：我的问题被标记为重复： Arrow Function syntax not working with webpack?
1）它与Vue无关 2）关于使用箭头函数作为类成员，我的问题不是

Answer 1

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

vue webpack uglify - 箭头函数

1 个答案: