Modifying js babel loader

I’d like to modify the JS babel loader, so that I can tweak the excludes / includes and run the loader against some of my node_modules - I’m using some ES6 modules which allow this and will allow me to import only required parts of a library instead of whole bundled files.

I understand how to use modifyWebpackConfig in order to do this, but ideally I’d like to use Gatsby’s own babelConfig generator rather than having to reproduce this. The trouble is this relies on the program variable which doesn’t seem to be accessible within gatsby-node.js. Is this possible currently? Or would it be better to add some kind of configuration to allow tweaking of the include + exclude of the babel-loader?

[calcsam]

Glad you figured it out! This looks like a great example – could you add it to the docs?

https://www.gatsbyjs.org/docs/add-custom-webpack-config/

[baseten]

Forgot to return the promise! This is working now, hopefully someone else will find it useful:

const generateBabelConfig = require( 'gatsby/dist/utils/babel-config' );

...

exports.modifyWebpackConfig = ( { config, stage } ) => {
    const program = {
        directory: __dirname,
        browserslist: [ '> 1%', 'last 2 versions', 'IE >= 9' ]
    };

    return generateBabelConfig( program, stage )
        .then( babelConfig => {
            config
                .removeLoader( 'js' )
                .loader( 'js', {
                    test: /\.jsx?$/,
                    exclude: ( modulePath ) => {
                        return /node_modules/.test( modulePath ) &&
                            !/node_modules\/(swiper|dom7)/.test( modulePath );
                    },
                    loader: 'babel',
                    query: babelConfig
                } );
        } );
};