Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 132 lines (92 sloc) 4.018 kb
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
1 browser-require
2 ===============
3
bced4a8 Brian Noguchi Got compile version implementation working.
authored
4 #### The easiest way to require and use CommonJS and NPM modules from your browser
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
5
6 Npm makes it easy to share code on your server. But how many times have you
7 wanted to share Javascript code easily between the server and the browser?
8 `browser-require` allows you to easily use CommonJS and NPM modules defined
9 on the server in your browser.
10
5c9ec21 Brian Noguchi Updated README
authored
11 browser-require enables you to require both relative (local to your project)
12 CommonJS modules as well as global NPM modules.
13
63a37bc Brian Noguchi Updated the README and examples to support the new implementation of bro...
authored
14 ### Installation
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
15 To install:
16 $ npm install browser-require
17
63a37bc Brian Noguchi Updated the README and examples to support the new implementation of bro...
authored
18 ### Using browser-require within your connect app
19
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
20 Currently, browser-require depends on the
63a37bc Brian Noguchi Updated the README and examples to support the new implementation of bro...
authored
21 [connect](https://github.com/visionmedia/connect/) middleware framework,
22 if you want to serve client javascript files that contain `require`s.
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
23
24 First, add in the browser-require middleware into your `connect` server:
25 var connect = require('connect')
26 , app = connect.createServer()
0953001 Brian Noguchi Moved browser_require.js to new client/ folder to make project structure...
authored
27 , exposeRequire = require('browser-require');
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
28
376ab22 Brian Noguchi Updated README.
authored
29 // The following line "app.use(..." is what you want to add to your project
30 // Make sure the browser-require middleware comes before staticProvider middleware
0953001 Brian Noguchi Moved browser_require.js to new client/ folder to make project structure...
authored
31 app.use(exposeRequire({
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
32 base: __dirname // This is where we look to find your non-global modules
33 });
34
35 app.use(connect.staticProvider(__dirname));
36 app.listen(3000);
37
38 On the browser, this is what your index.html might look like:
4b95b14 Brian Noguchi README formatting.
authored
39
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
40 <!DOCTYPE html>
41 <html>
42 <head>
43 <title>browser-require example</title>
44 </head>
45 <body>
46 <script type="text/javascript" src="/js/app.js"></script>
47 </body>
48 </html>
49
9c8688e Brian Noguchi Fixed README formatting. Markdown took my html comment out of context :(
authored
50 The script src "/js/app.js" is where your custom JavaScript code resides.
51
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
52 Then in `/js/app.js`, you can require CommonJS and NPM modules as if you are on the server:
4b95b14 Brian Noguchi README formatting.
authored
53
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
54 var _ = require('underscore'); // browser-side requires FTW!!!!
55
56 // This should alert "10"
57 alert(_.reduce([1, 2, 3, 4], function (sum, num) {
58 sum += num;
59 return sum;
60 }));
61
62 ### How it works
5c9ec21 Brian Noguchi Updated README
authored
63 When you request a javascript file:
9b32285 Brian Noguchi README numbered bullet format fix.
authored
64
63a37bc Brian Noguchi Updated the README and examples to support the new implementation of bro...
authored
65 1. The server looks up the source and its module dependencies (if any) recursively.
66 2. Once the server has collected all dependencies, it compiles the top-level file plus
67 its dependencies into a file that gets sent back to the browser.
5c9ec21 Brian Noguchi Updated README
authored
68
63a37bc Brian Noguchi Updated the README and examples to support the new implementation of bro...
authored
69 ### Command line binary
70 Sometimes you need to statically compile a set of javascript client files from the command line.
71 For example, this is necessary if you are building a Chrome plugin. A Chrome plugin can use JavaScript
72 files that exist inside the Chrome plugin (as opposed to fetching a JavaScript file that exists on the
73 server). Therefore, it is necessary in this case to compile your JavaScript files and their dependencies
74 outside of the context of a server.
685fbcf Brian Noguchi Added tests for compile mode. Added preferred api for compile mode by wr...
authored
75
63a37bc Brian Noguchi Updated the README and examples to support the new implementation of bro...
authored
76 `browser-require` supports this via a command line binary. You can use it in the following way:
16c11b0 Brian Noguchi More README formatting corrections.
authored
77
63a37bc Brian Noguchi Updated the README and examples to support the new implementation of bro...
authored
78 $ browser-require path/to/js/file.js > path/to/compiled/js/file.js
685fbcf Brian Noguchi Added tests for compile mode. Added preferred api for compile mode by wr...
authored
79
5c9ec21 Brian Noguchi Updated README
authored
80 ### Examples
632e37f Brian Noguchi Added instructions for running the examples.
authored
81 There are examples in the [./examples](https://github.com/bnoguchi/browser-require/tree/master/examples) directory.
82
83 To run the relative modules example:
4b95b14 Brian Noguchi README formatting.
authored
84
632e37f Brian Noguchi Added instructions for running the examples.
authored
85 $ cd examples/relative
86 $ node server.js
87
88 To run the npm modules example:
4b95b14 Brian Noguchi README formatting.
authored
89
03c07b9 Brian Noguchi Added npm install instructions for dependencies needed for npm example.
authored
90 $ npm install underscore
91 $ npm install data-structures-js
92 $ npm install validator
632e37f Brian Noguchi Added instructions for running the examples.
authored
93 $ cd examples/npm
94 $ node server.js
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
95
96 ### Running the tests
1fb6a9b Brian Noguchi Added npm installation instructions for modules used in our qunit tests.
authored
97 First, make sure the following npm modules are installed, since we will be
98 using them to test browser-require:
4b95b14 Brian Noguchi README formatting.
authored
99
1fb6a9b Brian Noguchi Added npm installation instructions for modules used in our qunit tests.
authored
100 $ npm install underscore
101 $ npm install data-structures-js
688fb5a Brian Noguchi README format fix.
authored
102 $ npm install validator
1fb6a9b Brian Noguchi Added npm installation instructions for modules used in our qunit tests.
authored
103
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
104 First, start up the test server:
4b95b14 Brian Noguchi README formatting.
authored
105
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
106 $ make start-test-server
1fb6a9b Brian Noguchi Added npm installation instructions for modules used in our qunit tests.
authored
107
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
108 To run tests in Chrome:
4b95b14 Brian Noguchi README formatting.
authored
109
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
110 $ make test-chrome
1fb6a9b Brian Noguchi Added npm installation instructions for modules used in our qunit tests.
authored
111
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
112 To run tests in Firefox:
4b95b14 Brian Noguchi README formatting.
authored
113
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
114 $ make test-firefox
1fb6a9b Brian Noguchi Added npm installation instructions for modules used in our qunit tests.
authored
115
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
116 Finally, stop the test server:
4b95b14 Brian Noguchi README formatting.
authored
117
3b1bd60 Brian Noguchi Added a v1 of the README.
authored
118 $ make stop-test-server
119
ec34f29 Brian Noguchi Added filter middleware item to TODOs.
authored
120 ### Planning on implementing
121 - A middleware filter mechanism to include things such as a Google Closure Compiler filter.
5c9ec21 Brian Noguchi Updated README
authored
122
123 ### Contributors
124 - [Brian Noguchi](https://github.com/bnoguchi)
125
126 ### License
127 MIT License
128
129 ---
130 ### Author
131 Brian Noguchi
Something went wrong with that request. Please try again.