I am using browserify and watchify, and would like to require() files other than the default extensions .js and .json without specifying the extension, for instance:

// Not ideal (tedious)
var Carousel = require('./components/Carousel/Carousel.jsx')

// Ideal
var Carousel = require('./components/Carousel/Carousel')

I have tried --extension=EXTENSION as specified in the browserify documentation:

"scripts": {
  "build": "browserify ./src/App.js --transform [ reactify --es6 ] > dist/script.js -v -d --extension=jsx",
  "watch": "watchify ./src/App.js --transform [ reactify --es6 ] -o dist/script.js -v -d --extension=jsx"
},

However I don't see any change. Is this possible? What would be the right way to do this?

I am using browserify and watchify, and would like to require() files other than the default extensions .js and .json without specifying the extension, for instance:

// Not ideal (tedious)
var Carousel = require('./components/Carousel/Carousel.jsx')

// Ideal
var Carousel = require('./components/Carousel/Carousel')

I have tried --extension=EXTENSION as specified in the browserify documentation:

"scripts": {
  "build": "browserify ./src/App.js --transform [ reactify --es6 ] > dist/script.js -v -d --extension=jsx",
  "watch": "watchify ./src/App.js --transform [ reactify --es6 ] -o dist/script.js -v -d --extension=jsx"
},

However I don't see any change. Is this possible? What would be the right way to do this?

• javascript
• browserify
• reactjs

1 Answer 1

Edit (April 27, 2015): I just noticed that in the question, I had an invalid argument for extension, like so:

"watch": "watchify ./src/App.js --extension=jsx -o dist/script.js -v -d"

It should be (notice the . (dot) in --extension=.jsx):

"watch": "watchify ./src/App.js --extension=.jsx -o dist/script.js -v -d"

Original Answer:

Adding in the browserify option to package.json did it for browserify but not for watchify.

"scripts": {
  "build": "browserify ./src/App.js > dist/script.js -v -d",
  "watch": "watchify ./src/App.js -o dist/script.js -v -d"
},
"browserify": {
  "extension": [ "jsx" ],
  "transform": [ [ "reactify", { "es6": true } ] ]
}

Add in the extension option for the watch command made watchify work.

"watch": "watchify ./src/App.js --extension=.jsx -o dist/script.js -v -d"

However, non-DRY. I'd like to keep my commands short as possible, but ~oh well~.