[Vuejs]-Webpack with babel-loader not emitting valid es5

by

4👍

✅

vue-loader will process your js with babel-loader (if it’s detected), and uses .babelrc by default.

In your current setup you are not passing any options to Babel when it is used by vue-loader (meaning Babel uses no rules for your Vue files).

Either create .babelrc or specify the js loader by yourself for the .vue files to provide it with options:

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

The env preset for Babel has an uglify option that will fully compile to ES5. This preset is recommended practice to keep your environment up to date.

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

Instead of using preset es2015 only, you might add es2016 and es2017, as well as stage-4, stage-3, etc. to assure all your code is transformed, and not just the ES2015 parts.

👤bzeaman

1👍

Nothing wrong with answer here already, but here is a solution that does not require a .babelrc file. This answer works for a standalone webpack.config.js file. I got this answer from taking a look under the hood of the laravel-mix library.

module: {
rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders:{
                    js: {
                        loader: 'babel-loader',
                        options: {                
                                    cacheDirectory: true,
                                    presets: [
                                        ['env', {
                                            'modules': false,
                                            'targets': {
                                                'browsers': ['> 2%'],
                                                uglify: true
                                            }
                                        }]
                                    ],
                                    plugins: [
                                        'transform-object-rest-spread',
                                        ['transform-runtime', {
                                            'polyfill': false,
                                            'helpers': false
                                        }]
                                    ]
                                }
                        },
                    }
            }
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }

    ]
},

I spent the better part of a day reading up all these useless blogs omit the core concept that babel-loader has to be attached to the vue-loader.

👤Jed Lynch

Leave a comment