Question

我正在使用Vue.js构建一个应用程序。在我的应用程序中，我有一个文件组件。该组件如下所示：

myComponent.vue

<template>
    <ul class="list-inline" v-if="isAvailable">
      <li><button @click="orderNow">order now</button></li>
    </ul>
</template>

<script type="text/javascript">
    export default {
        name: 'dataTable',
        data: function () {
            return {
                isAvailable:true
            };
        },
        methods: {
          orderNow: function() {
            let total = 5 + 2;
            alert(total);
          }
        }
    }
</script>

我的webpack.config.js文件如下所示：

webpack.config.js

"use strict";

const path = require('path');

const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/js/app.js',
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({ name: 'common' }),
        new webpack.optimize.UglifyJsPlugin()
    ],
    output: {
        publicPath: "/js/",
        path: path.join(__dirname, '/dist/js/'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            }
        ]
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        },
        extensions: ['.js', '.vue']
    }

当我从命令行运行Webpack时，收到一条错误消息：

意外的令牌：名称（isAvailable）

我把它缩小到了一行：let total = 5 + 2;。我知道let关键字是个问题。根据我的理解，这个错误正在发生，因为Uglify需要ES5代码。但是，我以为我是通过使用Babel加载程序将ES5代码发送到Uglify。如webpack配置中所示，预设设置为es2015。我究竟做错了什么？ };

错误：意外的令牌：名称

0 个答案: