• Stars
    star
    114
  • Rank 308,031 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 13 years ago
  • Updated over 12 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

RequireJS plugin for wrapping regular scripts as AMD modules

DEPRECATED

This plugin's wildest dreams came true and its functionality was added to RequireJS 2.0
Please upgrade your RequireJS and use its new shim config instead of wrap.js

wrap.js

version 0.2.2 A RequireJS plugin for wrapping regular scripts as AMD modules. This is useful for cases where regular scripts have dependencies, like jQuery plugins and Backbone. Depends on the text plugin

Usage

In your require.config use the wrapJS object to specify which scripts you want to wrap. Use the deps attribute to specify all the script's dependencies. Use the attach attribute to specify the global name of the library (think $, _, Backbone, etc) Use the path attribute to specify the location of the script to wrap. Alternatively use require's regular path config. The following example wraps backbone, declaring underscore and jQuery as dependencies:

require.config({
  wrapJS: {
    "backbone": {
      deps: ["underscore", "jquery"], //an array of the script's dependencies
      attach: "Backbone"
  }
});

Now use the wrap plugin to load the backbone (and its dependencies) like so:

require('wrap!backbone', function(Backbone){
  console.log(Backbone); //now returns Backbone, just as if Backbone were an AMD module
}

NOTE: As of RequireJS 1.0.5 you can reuse your app's main.js config as part of your build config, by using the new mainConfigFile setting: mainConfigFile:'path/to/main.js' So you only have to specify the wrapJS stuff once. Here's a sample app.build.js.

How It Works

During development, wrap.js basically does a nested require() for you, so that the script's dependencies are sure to load first. Then when you run the r.js build, an actual AMD module is generated based on your config. So say you were trying to wrap Backbone.js, and the Backbone.js script looks like this:

(function(){
  //stuff
}).call(this);

Now after the r.js build backbone looks like this:

define('wrap!backbone', ['jquery', 'underscore'], function(){
  (function(){
    //backbone stuff
  }).call(this);
  return (function () {
    var attach = Backbone;
    return (typeof attach === 'function') ? attach.apply(this) : attach;
  }());
});

NOTE: the generated AMD module contains an immediate function that resolves to and returns Backbone in the example above. Pure JS magic.

So there you have it. The wrap.js plugin turns any old script into an AMD module with just a little config.

More Examples

I've included several examples in the examples directory.

Use as Globals

By default the wrapped scripts are still available as globals. See as-globals.html.

Use as Modules

The wrapped scripts are also returned to your callback just like AMD modules. See as-modules.html.

Remove Globals

If you want to have the wrapped scripts no longer available as globals, you can remove the global—and do any other custom things—in a function you pass to the attach property. See as-modules-only.html.

Using the path option

Using the path attribute can help keep your config small. See use-path-option.html

Post-build example

To see an example of a generated module, see the build-example.js before and after.

More Repositories

1

csstyle

MOVED TO https://github.com/csstyle/csstyle a modern approach for crafting beautifully maintainable stylesheets
CSS
851
star
2

overmind

Easy module isolation and lazy loading for Angular apps
JavaScript
505
star
3

grunt-release

Release a new version of your Node-based project
JavaScript
390
star
4

macros

macros support for VS Code
JavaScript
166
star
5

amd-testing

testing AMD modules client and server side
JavaScript
124
star
6

overwatch-hero-picker

Let's build the overwatch hero picker UI with CSS grid & flexbox
CSS
39
star
7

zelda-inventory

Let's build the Zelda: Breath of the Wild inventory UI with web tech
HTML
26
star
8

lessless

compile your project's LESS into CSS and update <links>
JavaScript
24
star
9

play-crank

playing around with crank and friends
TypeScript
9
star
10

richmodels

potential replacement for ngResource in Angular 2
JavaScript
6
star
11

grunt-clear

Grunt task for clearing your terminal.
JavaScript
5
star
12

jsvars-loader

webpack loader for sharing styles in both JS and CSS
JavaScript
5
star
13

cinch.js

Picks up where your micro templating left off.
JavaScript
4
star
14

ng-workshop

Launch Series Tutorial
4
star
15

grunt-symlink

Grunt plugin for creating project symlinks during your build
JavaScript
3
star
16

grip.js

grips and databinding for backbone views
JavaScript
2
star
17

NativeWeb

A demo application built using Native Web ideals, technologies, and best practices.
JavaScript
2
star
18

twilio

test for twilio
1
star
19

grunt-messageformat

JavaScript
1
star
20

photobooth

Domo hack night project
JavaScript
1
star
21

test

1
star
22

servo

1
star
23

buster-core

JavaScript
1
star