enable usage with gulpfile.babel.js

[flying-sheep]

this boils down to:

1. run gulp with a babel config containing the transform es2015-modules-commonjs and not containing external-helpers-2
2. from the gulpfile, run rollup with a babel config that is the other way round

how can i do this?

creating a .babelrc that contains es2015-modules-commonjs makes rollup complain about it being loaded even if i specify another set of presets in the programmatic options (rollup({ presets: ... }))

i suspect that the babelrc preses get merged with the ones padded via options.

[flying-sheep]

ah, i have a solution:

.babelrc:

{ "presets": ["es2015"] }

gulpfile.babel.js:

import rollup from 'rollup-stream'
import babel from 'rollup-plugin-babel'

import gulp from 'gulp'

gulp.task('build-react', () =>
    rollup({
        entry: 'src/js/main.js',
        sourceMap: true,
        plugins: [
            babel({
                exclude: 'node_modules/**',
                babelrc: false,
                presets: ['react', 'es2015-rollup'],
                plugins: ['transform-class-properties'],
            })
        ]
    })
    ...)

i’m leaving that open because surely, there must be a more concise way to say “i want to use babelrc, but without es2015-modules-commonjs”

[Rich-Harris]

Options passed into Babel get merged with the nearest .babelrc file. So the solution I've settled on is this: have a .babelrc file in the project root that works for your build tool or test runner or whatever, and a separate one (with the es2015-rollup preset) in the folder with your source files (i.e. src/.babelrc). You could also have a test/.babelrc file if your test runner needs different config to your build tool. Seems to work pretty well, so I'll close this.

[flying-sheep]

oh, that works? great!

[flying-sheep]

actually it doesn’t seem to work…

i have

• /.babelrc: { "presets": ["es2015"] }
• /src/js/.babelrc: { "presets": ["es2015-rollup", "react"] }

but i still get Error: It looks like your Babel configuration specifies a module transformer. Please disable it.

[Rich-Harris]

Huh. Can you share a repo that reproduces it so that I can investigate? Thanks

[flying-sheep]

oh, i’m sorry, i was wrong.

it was the fault of transform-decorators-legacy for some reason. damn, now i’ve painstakingly created a minimal example…

[TxHawks]

This config breaks when trying to import an npm package using rollup-plugin-node-resolve.

As soon as I add import debounce from 'lodash-es/debounce' I get the following error:

Error: It looks like your Babel configuration specifies 
a module transformer. Please disable it. If you're using 
the "es2015" preset, consider using "es2015-rollup" instead. 
See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information                                                           

With a stack pointing to preflightCheck (/home/txh/delme/picky/node_modules/rollup-plugin-babel/dist/rollup-plugin-babel.cjs.js:27:98) --> transform (/home/txh/delme/picky/node_modules/rollup-plugin-babel/dist/rollup-plugin-babel.cjs.js:73:18)

My config file looks like this:

import babel from 'rollup-plugin-babel';                                 
import json from 'rollup-plugin-json';                                   
import commonjs from 'rollup-plugin-commonjs';                           
import nodeResolve from 'rollup-plugin-node-resolve';                    
import pkg from './package.json';                                        

export default {                                                         
  entry:  './src/index.js',                                      
  sourceMap: true,                                                       
  format: 'umd',                                                         
  moduleName: pkg.name,                                                  
  moduleId: pkg.name,                                                    
  plugins: [                                                             
    babel(),                                                                  
    json(),                                                              
    nodeResolve({                                                        
      jsnext: true,                                                      
      main: true,                                                        
      browser: true, // Prefer browser-ready packages                    
      extensions: ['.js', '.json']                                       
    }),                                                                  
    commonjs({                                                           
      include: 'node_modules/**/*'                                       
    }),                                                                  
  ]                                                                      
}

[TxHawks]

bump

[Rich-Harris]

@TxHawks that's odd. Couple of things you could try:

plugins: [                                                             
  babel({ include: 'src/**' }), // or { exclude: 'node_modules/**' }
  ...
]

plugins: [                                                             
  babel({ presets: ['es2015-rollup'], babelrc: false }),
  ...
]

If none of those work could you raise a new issue on rollup-plugin-babel please?

[TxHawks]

babel({ presets: ['es2015-rollup'], babelrc: false }) did the trick.

Thanks!