vue 2.0 无法编译ES6语法

# vue2.0 webpack 无法编译 ES6 语法

之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码，包括ES6语法也能正常转为ES5语法，但是当使用 vue@2.0 + vue-loader@10.0.2 以后发现，通过 webpack 打包后的代码里面的ES6语法没有转义，google一会后发现，需要在webpack.config.js里单独配置babel的编译规则。一个典型的配置如下：

var webpack = require('webpack');
var vue = require('vue-loader')
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    //插件项
    plugins: [
        new ExtractTextPlugin("[name].css")
    ],
    //页面入口文件配置
    entry: {
        index : './src/index.js'
    },
    //入口文件输出配置
    output: {
        path: './dist/',
        filename: '[name].js'
    },
    module: {
        preLoaders: [
          {
            test: /\.vue$/,
            loader: 'eslint',
            include: '../',
            exclude: /node_modules/
          },
          {
            test: /\.js$/,
            loader: 'eslint',
            include: '../',
            exclude: /node_modules/
          }
        ],
        //加载器配置
        loaders: [,
            { 
                test: /\.vue$/, 
                loader: 'vue'
            },
            { 
                test: /\.js$/, 
                loader: "babel",
                query: {presets: ['es2015']},
                exclude: /node_modules/ 
            },
            { 
                test: /\.css$/, 
                loader: ExtractTextPlugin.extract("css") 
            },
            { 
                test: /\.less$/, 
                loader: ExtractTextPlugin.extract("css!less") 
            }
        ]
    },
    vue : {
      loaders: {
        css: ExtractTextPlugin.extract("css"),
        less: ExtractTextPlugin.extract("css!less")
      },
      autoprefixer: { browsers: ["ios_saf >= 7", "android >= 4"] }
    },
    babel: {
      presets: ['es2015'],
      plugins: ['transform-runtime']
    }
};

看到最后一个配置了吗？需要单独为babel配置编译规则，vue-loader才能编译ES6语法。

此方法在 vue@2.1.8 , vue-loader@10.0.2 是可行的。

 

谢谢

转载于:https://www.cnblogs.com/xiaoniuzai/p/6286371.html