Giter Site home page Giter Site logo

requirejs-glob's Introduction

#requirejs-glob (experimental) A RequireJS plugin for loading multiple files that match a glob pattern.

##Why Most of the time when using RequireJS you want to explicitly declare each file's dependencies. But there are certain situations where it would be more convenient to load a whole handful of files that have a flat dependency tree. For example when using Angular dependencies are "injected", so the order your controllers, services, templates etc. are loaded doesn't matter. For cases like these, the glob! plugin can be super useful:

require([
  'glob!controllers/**/*.js',
  'glob!services/**/*.js',
  'glob!filters/**/*.js',
  'glob!directives/**/*.js',
]);

Now as you develop your application all new matching files will be included automatically. Each file will also be inlined during the r.js build.

##How The Browser environment has no way to find glob-matching files. So this plugin has a tiny server-side companion that runs during development only, listening for requests from the glob! plugin and returning lists of matching files.

One could accomplish something similar with a pre-run compile step like Grunt or Component, but part of the beauty of RequireJS is that it runs natively in the browser without the need for a build step. Most projects already use a webserver during development anyway. I like to think of this approach as "JIT Compiled AMD" plugin.

This piece is currently available as a Connect and Express compatible middleware.

##Getting Started Install the plugin with Bower: $ bower install requirejs-glob or download glob.js manually.

Add glob to your paths config that points to wherever you installed the glob.js file:

require.config({
  paths: {
    "glob": "../components/requirejs-glob/lib/glob"
  }
})

Add a glob setting to your RequireJS config, that will instruct the server-side piece where to start for the pattern matching:

require.config({
  glob: 'app/js/'
})

It should be the full path from the root of your project to the baseUrl where RequireJS looks to load your scripts from.

Install the Node companion with npm: $ npm install requirejs-glob

Use the requirejs-glob express middleware in your development environment:

app.configure('development', function(){
  //use requirejs-glob middleware
  app.use(require('requirejs-glob')());
});

Once you're all setup you can use the plugin:

require(['glob!controllers/**/*.js'], function(){});

Enjoy!

##Grunt integration

The middleware can also be used as part of a Grunt build, where the web server is created with the grunt-contrib-connect task. To do this, the grunt task must be configured with custom middleware.

For a registered task named connect:server, where compiled files are placed in the generated directory, use the middleware configuration option to load support for the requirejs glob middleware.

connect: {
  server: {
    options: {
      base: "generated",
      middleware: function(connect, options) {
        // Return array of whatever middlewares you want
        return [
          require('requirejs-glob')(),
          // standard middleware for static files and dir browsing
          connect.static(options.base),
          connect.directory(options.base)
        ];
      }
    }
  }
}

##License MIT

##TODO [] consider standalone for non-node backends [] tests [] examples

requirejs-glob's People

Contributors

geddski avatar iristyle avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.