前端 - vue文件中的ES6语法在webpack压缩时报错？

问题描述

问 题

大致的问题就像题目说的那样

我用vue单文件的方式来抽离项目中的组件，众所周知，一个vue文件有三个模块：template, script, style。
用webpack构建项目，webpack配置如下：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'stage-0']
                }
            }
        ]
    },
    resolve: {
        alias: {
        'vue$': 'vue/dist/vue.js'
        }
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            test: /(\.js|\.vue)$/,
            compress: {
                warnings: false
            },
            comments: false
        })
    ]
}

那么问题来了，我在vue文件中的script标签了用了一些es6的语法，诸如：

//eg1
for (let i = 0; i < someArray.length; i_++){
    //process...
}

//eg2
export default{
    methods: {
        someFunction(){
            //process...
        }
    }
}

在用webpack进行构建的时候，在命令行中提示我：
对应eg1↓

对应eg2↓

试着把eg1中的let改为var，把eg2中的函数声明改成完成的someFunction: function(){}就不会报错并且成功压缩了。

虽然说最后不报错了，但是不能写es6心里还是有点sad，所以来此跪求各位大神的赐教~

解决方案

能贴代码别贴图！

把 babel 相关的配置放到 .babelrc 文件中试试

这篇关于前端 - vue文件中的ES6语法在webpack压缩时报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！