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?
JSX isn't necessary to use as React can be written with both JS and JSX, but JSX makes it easier for users to make React applications, as it is similar to HTML. It makes it easier to write and update HTML code, thus functionality is easier to handle.
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications.
JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). It is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript.
React components have reusable codes that make it simple to use and learn. React library has JSX (JavaScript XML), which is HTML like syntax, which is processed into JavaScript calls. React components are reusable which helps while working on larger scale projects and has their own logic and controls.
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~.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With