CODEWITHSUNDEEP
reactjsbrowserifyecmascript-6babeljs
Ben
Ben

Reputation: 1568

Babelify omit file extension on import

I am writing a React application with ES6 and JSX. Below is the command I use to browserify my .es6 files into a bundle.js.

$ browserify src/es6/app.es6 -t babelify -o build/js/bundle.js

When I try to import a component using something like import MenuBar from './menu', I get the error message:

Error: Cannot find module './menu'

The only workaround I found is adding .es6 to the file name (import MenuBar from './menu.es6'), which isn't very appealing to look at.

Is there a way to let browserify or babelify know which extensions to use when importing modules?

Upvotes: 4

Views: 1809

Answers (1)

JMM
JMM

Reputation: 26827

Try:

browserify src/es6/app.es6 -t babelify -o build/js/bundle.js \
--extension=.js --extension=.json --extension=.es6

Babelify should handle .es6 by default on its end.

By the way, if you can you're often better off writing scripts against the browserify API rather than using the CLI. In this case it'd be something like:

var
  browserify = require('browserify'),
  babelify = require('babelify'),
  path = require('path'),
  fs = require('fs');

browserify('src/es6/app.es6', {
  extensions: ['.js', '.json', '.es6'],
})
  .transform(babelify)
  .bundle()
  .pipe(fs.createWriteStream(path.join(__dirname, 'build/js/bundle.js')));

Upvotes: 10

Related Questions