Extensify is a browserify transform that allows you to require non-standard files (such as .jsx
) without specifying the file extension. It is built using the browserify-transform-tools.
- Clean up your require calls!
- Supports all file extensions
- Keep the
.jsx
extension on your files so IDEs use correct syntax highlighting and linting - Works with directories - require a directory and it will automatically convert it
When developing with React and Browserify, you ideally want the following to be possible:
- Require JavaScript files like normal (without having to specify a file extension)
- Have your IDE correctly identify the file as JSX so it lints and does syntax checking correctly
- Keep your code explicit; if a file has JSX in it, you want it to have the
.jsx
extension
Sadly, you cannot have all these three things:
- If you want to require a non-standard file extension such as a
.jsx
file, you need to include the file extension or browserify won't know what to do with it - If you don't have the file extension as
.jsx
, it is likely that your IDE won't correctly identify the source as JSX and will highlight everything as an error - If you name your JSX file
.js
your code becomes less explicit
Extensify fixes this. It allows you to require non-standard files without the extension by rewriting the require calls before browserify bundles your project together, making it possible to do this:
var HomeComponent = require("./components/home");
instead of this:
var HomeComponent = require("./components/home.jsx");
npm install --save-dev extensify
Usage is identical to any other browserify-transform-tools
transforms. If you are using modules such as pkgify, aliasify or remapify make sure extensify runs after them in the transform process.
Directly in package.json:
{
"extensify": {
"extensions": ["jsx"]
}
}
or using referencing a separate JS file in package.json:
{
"extensify": "./pkgifyConfig.js"
}
var extensify = require("extensify");
b.transform(extensify, {
extensions: ["jsx"]
});
make bootstrap
make test
- Use the present tense ("Add feature" not "Added feature")
- Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
- Limit the first line to 72 characters or less
- Reference issues and pull requests liberally
- Consider starting the commit message with an applicable emoji:
- 💄
:lipstick:
when improving the format/structure of the code - 🐎
:racehorse:
when improving performance - 🚱
:non-potable_water:
when plugging memory leaks - 📝
:memo:
when writing docs - 🐧
:penguin:
when fixing something on Linux - 🍎
:apple:
when fixing something on Mac OS - 🏁
:checkered_flag:
when fixing something on Windows - 🐛
:bug:
when fixing a bug - 🔥
:fire:
when removing code or files - 💚
:green_heart:
when fixing the CI build - ✅
:white_check_mark:
when adding tests - 🔒
:lock:
when dealing with security - ⬆️
:arrow_up:
when upgrading dependencies - ⬇️
:arrow_down:
when downgrading dependencies
- 💄
(From atom)