PaulDiamant's avatar

Mix babel preset stage-2

Edit: Disregard, just realized we can use a custom babelrc file so I defined the stage-2 there and now it works.

Hey, I'm trying to add stage-2 to the babelConfig in laravel mix modules to be able to use something in VueJS with mapping getters and actions

for example: computed: { ...mapStage... }

babelConfig() {
        let file = this.Paths.root('.babelrc');

        // If the user has defined their own .babelrc file,
        // the babel-loader will automatically fetch it.
        // Otherwise, we'll use these defaults.
        return this.File.exists(file) ? '?cacheDirectory' : '?' + JSON.stringify({
            'cacheDirectory': true,
            'presets': [
                ['es2015', 'stage-2']
            ]
        });
    }

I've edited the babel config in Mix.js inside laravel-mix/src/Mix.js to this and added the stage-2 preset and also installed it's module.

But it still doesn't seem to work properly, any ideas?

0 likes
4 replies
PaulDiamant's avatar

Yes, we can use a custom babelrc file so I defined the stage-2 there and now it works.

kapstahillar's avatar

Laravel mix has really simple config system. You can config lots of different things by making your own webpack.mix.js into root folder.

Also you can config babel from this file.

-- webpack.mix.js --

let mix = require('laravel-mix');

mix.react('resources/assets/mytheme/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .webpackConfig({
        resolve: {
            modules: [
                path.resolve('node_modules'),
                        path.resolve('resources/assets/mytheme'),
            ]
        }
   })
   .babelConfig({
        presets: [
                'env', 
                'stage-2'
             ]
   });

Please or to participate in this conversation.