extensify

    1.0.3 • Public • Published

    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

    Purpose

    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");

    Installation

    npm install --save-dev extensify

    Usage

    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.

    package.json

    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"]
    });

    Contributing

    Setup

    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: 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)

    Install

    npm i extensify

    DownloadsWeekly Downloads

    3

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • oliverwoodings