Last active
March 16, 2016 21:00
-
-
Save karlfloersch/a719e3edf00ebe66f7e4 to your computer and use it in GitHub Desktop.
Webpack loader that wraps a JS file in a function so that you can inject variables to be modified. Original Author: @IngwiePhoenix
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var loaderUtils = require("loader-utils"); // https://www.npmjs.com/package/loader-utils | |
module.exports = function WrapAsFnLoader(source) { | |
var query = loaderUtils.parseQuery(this.query); | |
var exportVars = query.exports; | |
var exStmt = []; | |
// Build the local variables by using the exports property on the query. | |
// This allows us to turn a couple this-variables into locals. | |
// Use a string to indicate that you want to import it as the same name, | |
// alternatively, provide an array of key-value pairs: The key becomes the local var, | |
// the key is the environment's property. | |
exportVars.forEach(function(ex){ | |
if(typeof ex == "string") { | |
exStmt.push([ | |
"var", | |
ex, | |
"=", | |
"this["+JSON.stringify(ex)+"];" | |
].join(" ")); | |
} else if(typeof ex == "object") { | |
for(var propName in ex) { | |
exStmt.push([ | |
"var", | |
propName, | |
"=", | |
"this["+JSON.stringify(ex[propName])+"];" | |
]); | |
} | |
} | |
}); | |
// Build the source | |
this.cacheable(); | |
return [ | |
"module.exports = function testing(env){", | |
" var fn = function(){", | |
exStmt.join("\n"), | |
source, | |
" }", | |
" return fn.call(env);", | |
"}" | |
].join("\n"); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Use Case
Consider this circumstance:
file1:
file2:
You're going to have a hard time doing this with normal webpack loaders.
What wrapAsFn loader can do
This loader will preform the following transformation to
file2
:file2:
Now in
file1
you can write:Success! We've done it! 😄