Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
409 views
in Technique[技术] by (71.8m points)

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,所以来此跪求各位大神的赐教~


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

能贴代码别贴图!

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...