How do I require() / import modules from the console? For example, say I've installed the ImmutableJS npm, I'd like to be able to use functions from the module while I'm working in the console.
One of the major differences between require() and import() is that require() can be called from anywhere inside the program whereas import() cannot be called conditionally, it always runs at the beginning of the file. To use the require() statement, a module must be saved with .
Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is src/index.js and will output the result in dist/main.js minified and optimized for production.
require. context. You can create your own context with the require. context() function. It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.
Here's another more generic way of doing this.
The current version of WebPack exposes webpackJsonp(...)
, which can be used to require a module by ID:
function _requireById(id) { return webpackJsonp([], null, [id]); }
or in TypeScript
window['_requireById'] = (id: number): any => window['webpackJsonp'];([], null, [id]);
The ID is visible at the top of the module in the bundled file or in the footer of the original source file served via source maps.
Requiring a module by name is much trickier, as WebPack doesn't appear to keep any reference to the module path once it has processed all the sources. But the following code seems to do the trick in lot of the cases:
/** * Returns a promise that resolves to the result of a case-sensitive search * for a module or one of its exports. `makeGlobal` can be set to true * or to the name of the window property it should be saved as. * Example usage: * _requireByName('jQuery', '$'); * _requireByName('Observable', true)´; */ window['_requireByName'] = (name: string, makeGlobal?: (string|boolean)): Promise<any> => getAllModules() .then((modules) => { let returnMember; let module = _.find<any, any>(modules, (module) => { if (_.isObject(module.exports) && name in module.exports) { returnMember = true; return true; } else if (_.isFunction(module.exports) && module.exports.name === name) { return true; } }); if (module) { module = returnMember ? module.exports[name] : module.exports; if (makeGlobal) { const moduleName = makeGlobal === true ? name : makeGlobal as string; window[moduleName] = module; console.log(`Module or module export saved as 'window.${moduleName}':`, module); } else { console.log(`Module or module export 'name' found:`, module); } return module; } console.warn(`Module or module export '${name}'' could not be found`); return null; }); // Returns promise that resolves to all installed modules function getAllModules() { return new Promise((resolve) => { const id = _.uniqueId('fakeModule_'); window['webpackJsonp']( [], {[id]: function(module, exports, __webpack_require__) { resolve(__webpack_require__.c); }}, [id] ); }); }
This is quick first shot at this, so it's all up for improvement!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With