Webpack mit Babel-Loader nicht gültig es5

Question

Ich habe eine Webpack-Konfiguration, die auf https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js basiert Es verwendet Vue-Loader und Babel-Loader. Das Problem ist, dass ich ES5-Code nicht erzeugen kann, so dass es in den meisten Clients funktioniert.

Wenn ich die ES2015-Voreinstellung verwende, kann webpack.optimize.UglifyJsPlugin die Ausgabe nicht minimieren, da Uglify nur ES5 verarbeiten kann (ohne den Harmonienzweig zu berücksichtigen). Die Fehler sind ähnlich wie: Unexpected token: punc (() und in mehreren Dateien auftreten.

Ich kann dies umgehen, indem Sie babili-webpack-plugin verwenden, die den ES6-Code minimieren wird, aber sehr langsam ist. Jedoch, wenn ich diesen Code bereitstellen, sehe ich Fehler zurück gemeldet werden, sagen Block-scoped declarations (let, const, function, class) not yet supported outside strict mode, so dass ich weiß, dass sie ältere Clients sind erstickt auf ES6-Code.

Wie bekomme ich die richtige ES5-Code-Ausgabe von babel-loader? Ich habe mehrere Presets ausprobiert, mit oder ohne transform-runtime Plugin. Config unter:

const webpack = require('webpack'); 
const globEntries = require('webpack-glob-entries'); 
const _ = require('lodash'); 
const path = require('path'); 
const BabiliPlugin = require("babili-webpack-plugin"); 

const env = process.env.NODE_ENV; 

let entries; 
if (env === 'production') { 
    entries = globEntries('./src/**/vue/*.js'); 
} else { 
    entries = _.mapValues(globEntries('./src/**/vue/*.js'), entry => [entry, 'webpack-hot-middleware/client?reload=true']); 
} 

module.exports = { 
    entry: entries, 
    output: { 
    path: '/', ///no real path is required, just pass "/" 
    publicPath: '/vue', 
    filename: '[name].js', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      scss: 'vue-style-loader!css-loader!sass-loader', 
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax', 
      }, 
      // other vue-loader options go here 
     }, 
     }, 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: { 
      loader: 'babel-loader', 
      query: { 
      presets: ['es2015'], 
      plugins: ['transform-runtime'], 
      }, 
     }, 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader', 
     options: { 
      name: '[name].[ext]?[hash]', 
     }, 
     }, 
    ], 
    }, 
    resolve: { 
    alias: { 
     vue$: 'vue/dist/vue.esm.js', 
    }, 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), // Enable HMR 
    new webpack.NoEmitOnErrorsPlugin(), 
    ], 
    performance: { 
    hints: false, 
    }, 
    devtool: '#eval-source-map', 
}; 

if (env === 'staging' || env === 'production') { 
    //module.exports.devtool = env === 'staging' ? '#source-map' : false; 
    module.exports.devtool = '#source-map'; 
    module.exports.output.path = path.resolve(__dirname, './src/v1/parse/cloud/public/vue'); 
    // http://vue-loader.vuejs.org/en/workflow/production.html 
    module.exports.plugins = (module.exports.plugins || []).concat([ 
    new webpack.DefinePlugin({ 
     'process.env': { 
     NODE_ENV: `"${env}"`, 
     }, 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     sourceMap: true, 
     compress: { 
     warnings: false, 
     }, 
    }), 
    // new BabiliPlugin(), 
    new webpack.LoaderOptionsPlugin({ 
     minimize: true, 
    }), 
    ]); 
} 

Answer 1

vue-loader wird verarbeiten Ihre js mit babel-loader (wenn es erkannt wird), und uses .babelrc by default.

In Ihrem aktuellen Setup Sie sind nicht alle Optionen zu Babel vorbei, wenn es von vue-loader verwendet wird (Babel Sinn verwendet keine Regeln für die Vue-Dateien).

Entweder erstellen .babelrc oder geben Sie den js Lader selbst für die .vue Dateien mit Optionen zu bieten:

{ 
    test: /\.vue$/, 
    loader: 'vue-loader', 
    options: { 
    loaders: { 
     js: 'babel?presets[]=es2015' // Pass parameters as options 
    } 
    } 
} 

Die env Voreinstellung für Babel has an uglify option, die vollständig auf ES5 kompilieren. Diese Voreinstellung wird empfohlen, um Ihre Umgebung auf dem neuesten Stand zu halten.

// .babelrc 
{ 
    "presets": [ 
    [ "env", { "uglify": true } ], 
    "stage-1" // Or other presets not included with 'env' preset. 
    ], 
    "plugins": ["transform-runtime"] 
} 

Statt nur voreingestellten es2015 verwenden, können Sie es2016 und es2017 hinzufügen sowie stage-4, stage-3 usw., um sicherzustellen, den gesamten Code umgewandelt wird, und nicht nur die ES2015 Teile.