Rewrite .jsx files without the file extension in browserify

Usage no npm install needed!

<script type="module">
  import extensify from 'https://cdn.skypack.dev/extensify';


extensify Build Status

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"

Browserify API

var extensify = require("extensify");

b.transform(extensify, {
  extensions: ["jsx"]



make bootstrap

Running tests

make test

Commit messages

  • 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: :lipstick: when improving the format/structure of the code
    • :racehorse: :racehorse: when improving performance
    • :non-potable_water: :non-potable_water: when plugging memory leaks
    • :memo: :memo: when writing docs
    • :penguin: :penguin: when fixing something on Linux
    • :apple: :apple: when fixing something on Mac OS
    • :checkered_flag: :checkered_flag: when fixing something on Windows
    • :bug: :bug: when fixing a bug
    • :fire: :fire: when removing code or files
    • :green_heart: :green_heart: when fixing the CI build
    • :white_check_mark: :white_check_mark: when adding tests
    • :lock: :lock: when dealing with security
    • :arrow_up: :arrow_up: when upgrading dependencies
    • :arrow_down: :arrow_down: when downgrading dependencies

(From atom)