Clever Geek Handbook

Babelify omit file extension on import

I am writing a React app with ES6 and JSX . Below is the command I use to draw my files .es6

to 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 an error:

Error: Cannot find module './menu'

The only workaround I have found is adding .es6

( import MenuBar from './menu.es6'

) to the filename , which is not very appealing to look at.

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

+3


source to share


1 answer


Try:

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


Babelify should handle .es6

the default at its end.

By the way, if you can often write scripts against the browser API and not use the CLI. In this case, it will be something like this: 
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')));
+9


source






More articles:


All Articles