webpack - npm Package Compare versions

Comparing version 0.2.4 to 0.2.6

bin/webpack.js

@@ -42,2 +42,5 @@ #!/usr/bin/env node
 	.default("json", false)
+	
+	.string("alias")
+	.describe("alias", "Set a alias name for a module. ex. http=http-browserify")
 
@@ -79,2 +82,14 @@ .demand(1)
 
+if(argv.alias) {
+	if(typeof argv.alias === "string")
+		argv.alias = [argv.alias];
+	options.resolve = options.resolve || {};
+	options.resolve.alias = options.resolve.alias || {};
+	var aliasObj = options.resolve.alias;
+	argv.alias.forEach(function(alias) {
+		alias = alias.split("=");
+		aliasObj[alias[0]] = alias[1];
+	});
+}
+
 var webpack = require("../lib/webpack.js");
@@ -81,0 +96,0 @@

lib/buildDeps.js

@@ -141,3 +141,4 @@ /*
 							if(err) {
-								errors.push(err+"\n @ " + filename + " (line " + requires[moduleName][0].line + ", column " + requires[moduleName][0].column + ")");
+								depTree.warnings.push("Cannot find module '" + moduleName + "'\n " + err +
+									"\n @ " + filename + " (line " + requires[moduleName][0].line + ", column " + requires[moduleName][0].column + ")");
 							} else {
@@ -258,3 +259,4 @@ requires[moduleName].forEach(function(requireItem) {
 											if(err) {
-												endOne(err);
+												depTree.warnings.push("A file in context was excluded because of error: " + err);
+												endOne();
 											} else {
@@ -279,13 +281,2 @@ contextModule.requires.push({id: moduleId});
 				}
-				var extensionsAccess = [];
-				extensions.forEach(function(ext) {
-					extensionsAccess.push("||map[name+\"");
-					extensionsAccess.push(ext.replace(/\\/g, "\\\\").replace(/"/g, "\\\""));
-					extensionsAccess.push("\"]");
-				});
-
-				contextModule.source = "/***/module.exports = function(name) {\n" +
-					"/***/\tvar map = " + JSON.stringify(contextModule.requireMap) + ";\n" +
-					"/***/\treturn require(map[name]" + extensionsAccess.join("") + ");\n" +
-					"/***/};";
 				callback(null, contextModule.id);
@@ -319,3 +310,4 @@ });
 			context.requires.forEach(function(requireItem) {
-				addModuleToChunk(depTree, depTree.modulesById[requireItem.id], chunkId, options);
+				if(requireItem.id)
+					addModuleToChunk(depTree, depTree.modulesById[requireItem.id], chunkId, options);
 			});
@@ -322,0 +314,0 @@ }

lib/parse.js

@@ -180,3 +180,3 @@ /*
 		var noCallee = false;
-		if(context.overwrite.indexOf("require") === -1 && 
+		if(context.overwrite.indexOf("require") === -1 &&
 			expression.callee && expression.arguments &&
@@ -187,3 +187,14 @@ expression.arguments.length == 1 &&
 			var param = parseCalculatedString(expression.arguments[0]);
-			if(param.code) {
+			if(param.conditional) {
+				context.requires = context.requires || [];
+				param.conditional.forEach(function(paramItem) {
+					context.requires.push({
+						name: paramItem.value,
+						valueRange: paramItem.range,
+						line: expression.loc.start.line,
+						column: expression.loc.start.column
+					});
+					console.dir(context.requires[context.requires.length-1]);
+				});
+			} else if(param.code) {
 				// make context
@@ -227,3 +238,3 @@ var pos = param.value.indexOf("/");
 		}
-		if(context.overwrite.indexOf("require") === -1 && 
+		if(context.overwrite.indexOf("require") === -1 &&
 			expression.callee && expression.arguments &&
@@ -254,3 +265,3 @@ expression.arguments.length >= 1 &&
 		}
-		if(context.overwrite.indexOf("require") === -1 && 
+		if(context.overwrite.indexOf("require") === -1 &&
 			expression.callee && expression.arguments &&
@@ -291,3 +302,3 @@ expression.arguments.length == 1 &&
 	case "Identifier":
-		if(context.overwrite.indexOf("require") === -1 && 
+		if(context.overwrite.indexOf("require") === -1 &&
 			expression.name === "require") {
@@ -304,3 +315,3 @@ context.contexts = context.contexts || [];
 			context.contexts.push(newContext);
-		} else if(context.overwrite.indexOf(expression.name) === -1 && 
+		} else if(context.overwrite.indexOf(expression.name) === -1 &&
 			expression.name in context.options.overwrites) {
@@ -319,13 +330,2 @@ context.requires = context.requires || [];
 
-function functionParamsContainsRequire(params) {
-	if(!params) return false;
-	var found = false;
-	params.forEach(function(param) {
-		if(param.type === "Identifier" && 
-			param.name === "require")
-			found = true;
-	});
-	return found;
-}
-
 function addOverwrites(context, params) {
@@ -339,3 +339,3 @@ var l = context.overwrite.length;
 		}
-		if(param.type === "Identifier" && 
+		if(param.type === "Identifier" &&
 			param.name in context.options.overwrites)
@@ -374,2 +374,17 @@ context.overwrite.push(param.name);
 		break;
+	case "ConditionalExpression":
+		var consequent = parseCalculatedString(expression.consequent);
+		var alternate = parseCalculatedString(expression.alternate);
+		var items = [];
+		if(consequent.conditional)
+			Array.prototype.push.apply(items, consequent.conditional);
+		else if(!consequent.code)
+			items.push(consequent);
+		else break;
+		if(alternate.conditional)
+			Array.prototype.push.apply(items, alternate.conditional);
+		else if(!alternate.code)
+			items.push(alternate);
+		else break;
+		return {value: "", code: true, conditional: items};
 	case "Literal":
@@ -376,0 +391,0 @@ return {range: expression.range, value: expression.value+""};

lib/resolve.js

@@ -28,6 +28,8 @@ /*
 		options.paths = [];
+	if(!options.alias)
+		options.alias = {};
 	function finalResult(err, absoluteFilename) {
 		if(err) {
 			callback("Module \"" + identifier + "\" not found in context \"" +
-						context + "\"\n" + err);
+						context + "\"\n  " + err);
 			return;
@@ -39,2 +41,9 @@ }
 	var contextArray = split(context);
+	while(options.alias[identArray[0]]) {
+		var old = identArray[0];
+		identArray[0] = options.alias[identArray[0]];
+		identArray = split(path.join.apply(path, identArray));
+		if(identArray[0] === old)
+			break;
+	}
 	if(identArray[0] === "." || identArray[0] === ".." || identArray[0] === "" || identArray[0].match(/^[A-Z]:$/i)) {
@@ -41,0 +50,0 @@ var pathname = identArray[0][0] === "." ? join(contextArray, identArray) : path.join.apply(path, identArray);

lib/templateAsync.js

@@ -5,2 +5,3 @@ /******/(function(document, undefined) {
 /******/		function require(moduleId) {
+/******/			if(typeof moduleId !== "number") throw new Error("Cannot find module '"+moduleId+"'");
 /******/			if(installedModules[moduleId])
@@ -7,0 +8,0 @@ /******/				return installedModules[moduleId].exports;

lib/templateSingle.js

 /******/(function(modules) {
 /******/	var installedModules = {};
 /******/	function require(moduleId) {
+/******/		if(typeof moduleId !== "number") throw new Error("Cannot find module '"+moduleId+"'");
 /******/		if(installedModules[moduleId])
@@ -5,0 +6,0 @@ /******/			return installedModules[moduleId].exports;

lib/webpack.js

@@ -39,2 +39,11 @@ /*
 	   add absolute filenames of input files as comments
+	- resolve.alias (object)
+	   replace a module. ex {"old-module": "new-module"}
+	- resolve.extensions (object)
+	   possible extentions for files
+	- resolve.paths (array)
+	   search paths
+	- parse.overwrites (object)
+	   free module varables which are replaced with a module
+	   ex. { "$": "jquery" }
 */
@@ -66,4 +75,8 @@ module.exports = function(context, moduleName, options, callback) {
 	options.resolve.paths = options.resolve.paths || [];
-	options.resolve.paths.unshift(path.join(path.dirname(__dirname), "buildin"));
-	options.resolve.paths.unshift(path.join(path.dirname(__dirname), "buildin", "web_modules"));
+	options.resolve.paths.push(path.join(path.dirname(__dirname), "buildin"));
+	options.resolve.paths.push(path.join(path.dirname(__dirname), "buildin", "web_modules"));
+	options.resolve.paths.push(path.join(path.dirname(__dirname), "buildin", "node_modules"));
+	options.resolve.alias = options.resolve.alias || {};
+	options.resolve.alias.http = options.resolve.alias.http || path.join(path.dirname(__dirname), "node_modules", "http-browserify")
+	options.resolve.alias.vm = options.resolve.alias.vm || path.join(path.dirname(__dirname), "node_modules", "vm-browserify")
 	buildDeps(context, moduleName, options, function(err, depTree) {
@@ -70,0 +83,0 @@ if(err) {

lib/writeChunk.js

@@ -28,3 +28,3 @@ /*
 		}
-		buffer.push(writeSource(module));
+		buffer.push(writeSource(module, options));
 		buffer.push("\n\n/******/},\n/******/\n");
@@ -31,0 +31,0 @@ }

lib/writeSource.js

@@ -9,14 +9,40 @@ /*
 
-module.exports = function(module) {
+module.exports = function(module, options) {
+	if(!module.source) {
+		if(module.requireMap) {
+			var extensions = (options.resolve && options.resolve.extensions) || [".web.js", ".js"];
+			var extensionsAccess = [];
+			extensions.forEach(function(ext) {
+				extensionsAccess.push("||map[name+\"");
+				extensionsAccess.push(ext.replace(/\\/g, "\\\\").replace(/"/g, "\\\""));
+				extensionsAccess.push("\"]");
+			});
+
+			return "/***/function err(name) { throw new Error(\"Cannot find module '\"+name+\"'\") }\n"+
+				"/***/module.exports = function(name) {\n" +
+				"/***/\tvar map = " + JSON.stringify(module.requireMap) + ";\n" +
+				"/***/\treturn require(map[name]" + extensionsAccess.join("") + "||(err(name)));\n" +
+				"/***/};";
+		}
+		return;
+	}
 	var replaces = []; // { from: 123, to: 125, value: "4" }
 	function genReplaceRequire(requireItem) {
-		if(requireItem.expressionRange && requireItem.id !== undefined) {
+		if(requireItem.id !== undefined) {
 			var prefix = "";
 			if(requireItem.name)
 				prefix += "/* " + requireItem.name + " */";
-			replaces.push({
-				from: requireItem.expressionRange[0],
-				to: requireItem.expressionRange[1],
-				value: "require(" + prefix + requireItem.id + ")"
-			});
+			if(requireItem.expressionRange) {
+				replaces.push({
+					from: requireItem.expressionRange[0],
+					to: requireItem.expressionRange[1],
+					value: "require(" + prefix + requireItem.id + ")"
+				});
+			} else if(requireItem.valueRange) {
+				replaces.push({
+					from: requireItem.valueRange[0],
+					to: requireItem.valueRange[1],
+					value: prefix + requireItem.id
+				});
+			}
 		}
@@ -23,0 +49,0 @@ }

package.json

 {
 	"name": "webpack",
-	"version": "0.2.4",
+	"version": "0.2.6",
 	"author": "Tobias Koppers @sokra",
@@ -12,2 +12,6 @@ "description": "Packs CommonJs Modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand.",
 	},
+	"optionalDependencies": {
+		"http-browserify": "*",
+		"vm-browserify": "*"
+	},
 	"licenses": [
@@ -14,0 +18,0 @@ {

README.md

 # modules-webpack
 
-## Goal
-
 As developer you want to reuse existing code.
@@ -17,6 +15,15 @@ As with node.js and web all file are already in the same language, but it is extra work to use your code with the node.js module system and the browser.
 * reuse server-side code (node.js) on client-side
-* create multiple files which are loaded on demand
-* dependencies managed for you
-* faster page load in big webapps
+* create multiple files which are loaded on demand (faster page load in big webapps)
+* dependencies managed for you, on compile time
 
+## Goals
+
+* minimize code size
+ * minimize code size on inital download
+ * download code only on demand
+* hide development details, like module names and folder structure
+* require minimal configuration
+ * load polyfills for node-specific things if used
+ * offer replacements for node buildin libaries
+
 ## Example
@@ -71,2 +78,3 @@
 File 1: web.js
+- code of that file
 - code of module a and dependencies
@@ -82,2 +90,16 @@ - code of module b and dependencies
 
+## Reusing node.js code
+
+`webpack` was built to support most of the code that was coded for node.js environment.
+For example this works out of the box:
+
+* `require("./templates/" + templateName);`
+* `require(condition ? "moduleA" : condition2 ? "moduleB" : "./localStuff");`
+* `function xyz(require) { require("text"); } xyz(function(a) { console.log(a) });`
+* `var r = require; r("./file");` with warning
+* `function xyz(require) { require("./file"); } xyz(require);` with warning
+* `try { require("missingModule"); } catch(e) { console.log("missing") }` with warning
+* `var require = function(a) { console.log(a) }; require("text");`
+* `if(condition) require("optionalModule")` with warning if missing
+
 ## Browser replacements
@@ -137,3 +159,2 @@
 
-* `require` should not be overwritten by variable declaration (`var require = ...`), by function parameter is allowed `function(require) {...}`.
 * `require.ensure` should not be overwritten or called indirect
@@ -148,3 +169,3 @@ * `require.context` should not be overwritten or called indirect
 * `require.context`. It includes the whole directory.
-* expressions in require arguments: `require(variable)`, `require(condition ? "a" : "b")` (TODO)
+* expressions in require arguments: `require(variable)`, webpack is smart enough for this `require(condition ? "a" : "b")`
 * the function passed to `require.ensure` is not inlined in the call.
@@ -157,2 +178,4 @@
 You should replace them by own modules if you want to use them.
+For some modules are replacements included in `webpack`.
+Some credit goes to the browserify contributors, as I took some replacements from them.
 
@@ -166,3 +189,3 @@ ```
 
-TODO provide some replacements
+TODO provide some replacements (half way done...)
 
@@ -183,9 +206,11 @@ ## Usage
 Options:
-  --single             Disable Code Splitting                 [boolean]  [default: false]
-  --min                Minimize it with uglifyjs              [boolean]  [default: false]
-  --filenames          Output Filenames Into File             [boolean]  [default: false]
-  --options            Options JSON File                      [string]
-  --script-src-prefix  Path Prefix For JavaScript Loading     [string]
-  --libary             Stores the exports into this variable  [string]
-  --colors             Output Stats with colors               [boolean]  [default: false]
+  --single             Disable Code Splitting                                   [boolean]  [default: false]
+  --min                Minimize it with uglifyjs                                [boolean]  [default: false]
+  --filenames          Output Filenames Into File                               [boolean]  [default: false]
+  --options            Options JSON File                                        [string]
+  --script-src-prefix  Path Prefix For JavaScript Loading                       [string]
+  --libary             Stores the exports into this variable                    [string]
+  --colors             Output Stats with colors                                 [boolean]  [default: false]
+  --json               Output Stats as JSON                                     [boolean]  [default: false]
+  --alias              Set a alias name for a module. ex. http=http-browserify  [string]
 ```
@@ -234,30 +259,356 @@
 
-## medikoo/modules-webmake
+## Comparison
 
-`webpack` as originally intended as fork for `webmake` for @medikoo so it shared several ideas with it.
-So big credit goes to medikoo.
+<table>
+ <tr>
+  <th>
+	Feature
+  </th>
+  <th>
+	sokra/<br/>modules-<br/>webpack
+  </th>
+  <th>
+	medikoo/<br/>modules-<br/>webmake
+  </th>
+  <th>
+	substack/<br/>node-<br/>browserify
+  </th>
+ </tr>
 
-However `webpack` has big differences:
+ <tr>
+  <td>
+	single bundle
+  </td>
+  <td>
+	yes
+  </td>
+  <td>
+	yes
+  </td>
+  <td>
+	yes
+  </td>
+ </tr>
 
-`webpack` replaces module names and paths with numbers. `webmake` don't do that and do resolves requires on client-side.
-This design of `webmake` was intended to support variables as arguments to require calls.
-`webpack` resolves requires in compile time and have no resolve code on client side. This results in smaller bundles.
-Variables as arguments will be handled different and with more limitations in `webpack`.
+ <tr>
+  <td>
+	multiple bundles, Code Splitting
+  </td>
+  <td>
+	yes
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+ </tr>
 
-Another limitation in `webmake` which are based on the previous one is that modules must be in the current package scope.
-In `webpack` this is not a restriction.
+ <tr>
+  <td>
+	indirect require
+	<code>var r = require; r("./file");</code>
+  </td>
+  <td>
+	in directory
+  </td>
+  <td>
+	include by config option
+  </td>
+  <td>
+	no
+  </td>
+ </tr>
 
-There is no `require.context` in `webmake`. Therefore there is a forced include list in options which allows modules to be required even if the names were not available at compile time.
+ <tr>
+  <td>
+	concat in require
+	<code>require("./fi" + "le")</code>
+  </td>
+  <td>
+	yes
+  </td>
+  <td>
+	yes
+  </td>
+  <td>
+	no
+  </td>
+ </tr>
 
-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).
+ <tr>
+  <td>
+	variables in require (local)
+	<code>require("./templates/"+template)</code>
+  </td>
+  <td>
+	yes, complete directory included
+  </td>
+  <td>
+	include by config option
+  </td>
+  <td>
+	no
+  </td>
+ </tr>
 
-`webmake` do (currently) not support Code Splitting.
-But medikoo said he works at some related feature.
+ <tr>
+  <td>
+	variables in require (global)
+	<code>require(moduleName)</code>
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	include by config option
+  </td>
+  <td>
+	no
+  </td>
+ </tr>
 
+ <tr>
+  <td>
+	node buildin libs
+	<code>require("http");</code>
+  </td>
+  <td>
+	some
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	many
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	<code>process</code> polyfill
+  </td>
+  <td>
+	yes, on demand
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	yes, ever
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	<code>module</code> polyfill
+  </td>
+  <td>
+	yes, on demand
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	<code>require.resolve</code>
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	yes
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	<code>global</code> to <code>window</code> mapping
+  </td>
+  <td>
+	yes
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	requirable files
+  </td>
+  <td>
+	filesystem
+  </td>
+  <td>
+	directory scope
+  </td>
+  <td>
+	filesystem
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	different modules with same name
+  </td>
+  <td>
+	yes
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	yes
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	eliminate duplicate code
+  </td>
+  <td>
+	yes
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	yes
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	require JSON
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	plugins
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	yes
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	compile coffee script
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	yes
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	watch mode
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	yes
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	debug mode
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	yes
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	libaries
+  </td>
+  <td>
+	on global obj
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	requirable
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	browser replacements
+  </td>
+  <td>
+	<code>web_modules</code> and <code>.web.js</code>
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	by alias config option
+  </td>
+ </tr>
+
+ <tr>
+  <td>
+	compiles with (optional) modules missing
+  </td>
+  <td>
+	yes, emit warnings
+  </td>
+  <td>
+	no
+  </td>
+  <td>
+	no
+  </td>
+ </tr>
+</table>
+
 ## Tests
@@ -264,0 +615,0 @@

require-polyfill.js

 // Polyfill for node.js
 //  adds require.ensure
 //  call it like this: require("webpack/require-polyfill")(require);
-// This is only required when you want to use require.ensure in server-side code
-//  which should be so only in rar cases.
+// This is only required when you want to use require.ensure or require.context
+//  in server-side code which should be so only in rar cases.
 module.exports = function(req) {
@@ -7,0 +7,0 @@ if(!req.ensure) {

test/browsertest/lib/index.web.js

@@ -30,3 +30,24 @@ window.test(true, "index.js should be replaced with index.web.js");
 window.test(testFunc(333, 678) === 678, "require overwrite in named function");
+function testCase(number) {
+	//window.test(require("./folder/file" + (number === 1 ? 1 : "2")) === "file" + number);
+	window.test(require(number === 1 ? "../folder/file1" : number === 2 ? "../folder/file2" : number === 3 ? "../folder/file3" : "./missingModule") === "file" + number, "?: operator in require do not create context, test "+number);
+}
+testCase(1);
+testCase(2);
+testCase(3);
 
+var error = null;
+try {
+	testCase(4);
+} catch(e) {
+	error = e;
+}
+window.test(error instanceof Error, "Missing module should throw Error, indirect");
+error = null;
+try {
+	require("./missingModule2");
+} catch(e) {
+	error = e;
+}
+window.test(error instanceof Error, "Missing module should throw Error, direct");
 
@@ -33,0 +54,0 @@ require.ensure([], function(require) {

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

120525

increased by5.82%

Number of package files

93

increased by4.49%

Lines of code

2866

increased by3.32%

Number of lines in readme file

628

increased by126.71%

Worsened metrics

Dependency count

6

increased by50%

Number of low supply chain risk alerts

37

increased by2.78%

No dependency changes