Skip to content

Commit 14b42ac

Browse files
sokrasokra
committed
added contexts, docs and examples
1 parent a3d4bb4 commit 14b42ac

25 files changed

Lines changed: 668 additions & 43 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
/node_modules
22
/test/js
33
/test/browsertest/js
4-
/example/js
4+
/examples/*/js

‎README.md‎

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ File 2: 1.web.js
7575
- code of module d and dependencies
7676
```
7777

78-
See [details](modules-webpack/tree/master/example) for exact output.
78+
See [details](modules-webpack/tree/master/examples/code-splitting) for exact output.
7979

8080
## Browser replacements
8181

@@ -87,19 +87,52 @@ Modules in `web_modules` replace modules in `node_modules`.
8787

8888
TODO specify replacements in options
8989

90+
## require.context
91+
92+
If the `require`d module is not known while compile time we get into a problem.
93+
A solution is the method `require.context` which takes a directory as parameter
94+
and returns a function which behaves like the `require` function issued from a file
95+
in this directory (but only if used for files in that directory).
96+
97+
### Example
98+
99+
We have a directory full of templates, which are compiled javascript files.
100+
A template should be loaded by template name.
101+
102+
``` javascript
103+
var requireTemplate = require.context("./templates");
104+
function getTemplate(templateName) {
105+
return requireTemplate("./" + templateName);
106+
}
107+
```
108+
109+
In addition to that `webpack` uses the `require.context` function automatically
110+
if you use variables or other non-literal things in the `require` function.
111+
That means the following code behaves like the above:
112+
113+
``` javascript
114+
function getTemplate(templateName) {
115+
return require("./templates/" + templateName);
116+
}
117+
// is compiled like: return require.context("./templates")("./"+templateName)
118+
```
119+
120+
See [details](modules-webpack/tree/master/examples/require.context) for complete example.
121+
122+
123+
*Warning: The complete code in the directory are included. So use it carefully.*
124+
90125
## Limitations
91126

92127
### `require`-function
93128

94129
As dependencies are resolved before running:
95130
* `require` should not be overwritten
96-
* `require` should not be called indirect as `var r = require; r("./a");`
97-
* arguments of `require` should be literals. `"./abc" + "/def"` is allowed to support long lines.
98-
* `require.ensure` has the same limitations as `require`
131+
* `require` should not be called indirect as `var r = require; r("./a");`. Use `require.context`?
132+
* `require.ensure` should not be overwritten or called indirect
99133
* the function passed to `require.ensure` should be inlined in the call.
100-
101-
TODO allow variables passing to `require` like `require("./templates/" + mytemplate)`
102-
(this will cause all modules matching this pattern to be included in addition to a mapping table)
134+
* `require.context` should not be overwritten or called indirect
135+
* the argument to `require.context` should be a literal or addition of multiple literals
103136

104137
### node.js specific modules
105138

@@ -173,7 +206,7 @@ add absolute filenames of input files as comments
173206
#### `callback`
174207
`function(err, source / stats)`
175208
`source` if `options.output` is not set
176-
else `stats` as json see [example](/modules-webpack/tree/master/example)
209+
else `stats` as json see [example](/modules-webpack/tree/master/examples/code-splitting)
177210

178211
## medikoo/modules-webmake
179212

@@ -183,14 +216,20 @@ So big credit goes to medikoo.
183216
However `webpack` has big differences:
184217

185218
`webpack` replaces module names and paths with numbers. `webmake` don't do that and do resolves requires on client-side.
186-
This design of `webmake` wes intended to support variables as arguments to require calls.
219+
This design of `webmake` was intended to support variables as arguments to require calls.
187220
`webpack` resolves requires in compile time and have no resolve code on client side. This results in smaller bundles.
188221
Variables as argments will be handled different and with more limitations.
189222

190223
Another limitation in `webmake` which are based on the previous one is that modules must be in the current package scope.
191224
In `webpack` this is not a restriction.
192225

193-
The design of `webmake` causes all modules with the same name to overlap. This can be problematic if different submodules rely on specific versions of the same module. The behaivior also differs from the behaivior of node.js, because node.js installs a module for each instance in submodules and `webmake` cause them the merge into a single module which is only installed once. In `webpack` this is not the case. Different versions do not overlap and modules are installed multiple times. But in `webpack` this can (currently) cause duplicate code if a module is used in multiple modules. I want to face this issue (TODO).
226+
The design of `webmake` causes all modules with the same name to overlap.
227+
This can be problematic if different submodules rely on specific versions of the same module.
228+
The behaivior also differs from the behaivior of node.js, because node.js installs a module for each instance in submodules and `webmake` cause them the merge into a single module which is only installed once.
229+
In `webpack` this is not the case.
230+
Different versions do not overlap and modules are installed multiple times.
231+
But in `webpack` this can (currently) cause duplicate code if a module is used in multiple modules.
232+
I want to face this issue (TODO).
194233

195234
`webmake` do (currently) not support Code Splitting.
196235

‎examples/code-splitted-require.context/README.md‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
# example.js
2+
3+
``` javascript
4+
function getTemplate(templateName, callback) {
5+
require.ensure([], function(require) {
6+
callback(require("../require.context/templates/"+templateName));
7+
});
8+
}
9+
getTemplate("a", function(a) {
10+
console.log(a);
11+
});
12+
getTemplate("b", function(b) {
13+
console.log(b);
14+
});
15+
```
16+
17+
# js/output.js
18+
19+
``` javascript
20+
/******/(function(document, undefined) {
21+
/******/ return function(modules) {
22+
/******/ var installedModules = {}, installedChunks = {0:1};
23+
/******/ function require(moduleId) {
24+
/******/ if(installedModules[moduleId])
25+
/******/ return installedModules[moduleId].exports;
26+
/******/ var module = installedModules[moduleId] = {
27+
/******/ exports: {}
28+
/******/ };
29+
/******/ modules[moduleId](module, module.exports, require);
30+
/******/ return module.exports;
31+
/******/ }
32+
/******/ require.ensure = function(chunkId, callback) {
33+
/******/ if(installedChunks[chunkId] === 1) return callback(require);
34+
/******/ if(installedChunks[chunkId] !== undefined)
35+
/******/ installedChunks[chunkId].push(callback);
36+
/******/ else {
37+
/******/ installedChunks[chunkId] = [callback];
38+
/******/ var head = document.getElementsByTagName('head')[0];
39+
/******/ var script = document.createElement('script');
40+
/******/ script.type = 'text/javascript';
41+
/******/ script.src = modules.c+chunkId+modules.a;
42+
/******/ head.appendChild(script);
43+
/******/ }
44+
/******/ };
45+
/******/ window[modules.b] = function(chunkId, moreModules) {
46+
/******/ for(var moduleId in moreModules)
47+
/******/ modules[moduleId] = moreModules[moduleId];
48+
/******/ var callbacks = installedChunks[chunkId];
49+
/******/ installedChunks[chunkId] = 1;
50+
/******/ for(var i = 0; i < callbacks.length; i++)
51+
/******/ callbacks[i](require);
52+
/******/ };
53+
/******/ return require(0);
54+
/******/ }
55+
/******/})(document)
56+
/******/({a:".output.js",b:"webpackJsonp",c:"",
57+
/******/0: function(module, exports, require) {
58+
59+
function getTemplate(templateName, callback) {
60+
require.ensure(1, function(require) {
61+
callback(require(1)("./"+templateName));
62+
});
63+
}
64+
getTemplate("a", function(a) {
65+
console.log(a);
66+
});
67+
getTemplate("b", function(b) {
68+
console.log(b);
69+
});
70+
71+
/******/},
72+
/******/
73+
/******/})
74+
```
75+
76+
# js/1.output.js
77+
78+
``` javascript
79+
/******/webpackJsonp(1, {
80+
/******/1: function(module, exports, require) {
81+
82+
/***/module.exports = function(name) {
83+
/***/ var map = {"./b.js":3,"./a.js":2,"./c.js":4};
84+
/***/ return require(map[name]||map[name+".web.js"]||map[name+".js"]);
85+
/***/};
86+
87+
/******/},
88+
/******/
89+
/******/2: function(module, exports, require) {
90+
91+
module.exports = function() {
92+
return "This text was generated by template A";
93+
}
94+
95+
/******/},
96+
/******/
97+
/******/3: function(module, exports, require) {
98+
99+
module.exports = function() {
100+
return "This text was generated by template B";
101+
}
102+
103+
/******/},
104+
/******/
105+
/******/4: function(module, exports, require) {
106+
107+
module.exports = function() {
108+
return "This text was generated by template C";
109+
}
110+
111+
/******/},
112+
/******/
113+
/******/})
114+
```
115+
116+
# Info
117+
118+
## Uncompressed
119+
120+
``` javascript
121+
{ chunkCount: 2,
122+
modulesCount: 5,
123+
modulesIncludingDuplicates: 5,
124+
modulesPerChunk: 2.5,
125+
modulesFirstChunk: 1,
126+
fileSizes: { 'output.js': 1855, '1.output.js': 729 } }
127+
```
128+
129+
## Minimized (uglify-js, no zip)
130+
131+
``` javascript
132+
{ chunkCount: 2,
133+
modulesCount: 5,
134+
modulesIncludingDuplicates: 5,
135+
modulesPerChunk: 2.5,
136+
modulesFirstChunk: 1,
137+
fileSizes: { 'output.js': 683, '1.output.js': 404 } }
138+
```

example/build.js renamed to examples/code-splitted-require.context/build.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ argv.shift();
55
argv.shift();
66
var extraArgs = argv.join(" ");
77

8-
cp.exec("node ../bin/webpack.js "+extraArgs+" example.js js/output.js", function (error, stdout, stderr) {
8+
cp.exec("node ../../bin/webpack.js "+extraArgs+" example.js js/output.js", function (error, stdout, stderr) {
99
console.log('stdout:\n' + stdout);
1010
console.log('stderr:\n ' + stderr);
1111
if (error !== null) {

‎examples/code-splitted-require.context/example.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
function getTemplate(templateName, callback) {
2+
require.ensure([], function(require) {
3+
callback(require("../require.context/templates/"+templateName));
4+
});
5+
}
6+
getTemplate("a", function(a) {
7+
console.log(a);
8+
});
9+
getTemplate("b", function(b) {
10+
console.log(b);
11+
});

example/README.md renamed to examples/code-splitting/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ webpackJsonp(1,{3:function(a,b,c){},4:function(a,b,c){}})
114114
fileSizes: { 'output.js': 1948, '1.output.js': 200 } }
115115
```
116116

117-
## Compress (uglify-js, no zip)
117+
## Minimized (uglify-js, no zip)
118118

119119
``` javascript
120120
{ chunkCount: 2,

‎examples/code-splitting/build.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var cp = require('child_process');
2+
3+
var argv = process.argv;
4+
argv.shift();
5+
argv.shift();
6+
var extraArgs = argv.join(" ");
7+
8+
cp.exec("node ../../bin/webpack.js "+extraArgs+" example.js js/output.js", function (error, stdout, stderr) {
9+
console.log('stdout:\n' + stdout);
10+
console.log('stderr:\n ' + stderr);
11+
if (error !== null) {
12+
console.log('error: ' + error);
13+
}
14+
});

example/example.js renamed to examples/code-splitting/example.js

File renamed without changes.

example/node_modules/a.js renamed to examples/code-splitting/node_modules/a.js

File renamed without changes.

example/node_modules/b.js renamed to examples/code-splitting/node_modules/b.js

File renamed without changes.

0 commit comments

Comments
 (0)