Wie kann ich die require() aus der Konsole mit webpack?

Einschließlich dieses in einem Modul erlauben require([modules], function) einen browser

window['require'] = function(modules, callback) {
  var modulesToRequire = modules.forEach(function(module) {
    switch(module) {
      case 'immutable': return require('immutable');
      case 'jquery': return require('jquery');
    }
  })
  callback.apply(this, modulesToRequire);
}

Beispiel:

require(['jquery', 'immutable'], function($, immutable) {
  //immutable and $ are defined here
});

Hinweis: Jede switch-Anweisung option sollte entweder etwas sein, das dieses Modul schon verlangt, oder sofern der von ProvidePlugin

Quellen:

Basierend auf diese Antwort, die verwendet werden können, um einen gesamten Ordner hinzuzufügen.

Alternative Methode aus Webpack Docs - das ermöglicht so etwas wie require.yourModule.function()

Fand ich einen Weg, der funktioniert, für beide WebPack 1 und 2. (solange die Quelle nicht-minified)

Repo: https://github.com/Venryx/webpack-runtime-require

Installieren

npm install --save webpack-runtime-require

Nutzung

Ersten, benötigen die module mindestens einmal.

import "webpack-runtime-require";

Wird es dann hinzufügen von Require () - Funktion auf das window-Objekt für die Verwendung in der Konsole oder überall in Ihrem code.

Dann einfach verwenden, etwa so:

let React = Require("react");
console.log("Retrieved React.Component: " + React.Component);

Es ist nicht sehr hübsch (es verwendet regexes zu suchen, das Modul wrapper-Funktionen) oder schnell (dauert ~50ms der erste Anruf, und ~0ms nach), aber beide sind völlig in Ordnung, wenn es nur für die hack-Tests in der Konsole.

Technik

Die unten ist eine beschnittene version der Quelle zu zeigen, wie es funktioniert. (siehe die repo für die vollständige/aktuelle)

var WebpackData;
webpackJsonp([],
    {123456: function(module, exports, __webpack_require__) {
        WebpackData = __webpack_require__;
    }},
    [123456]
);

var allModulesText;
var moduleIDs = {};
function GetIDForModule(name) {
    if (allModulesText == null) {
        let moduleWrapperFuncs = Object.keys(WebpackData.m).map(moduleID=>WebpackData.m[moduleID]);
        allModulesText = moduleWrapperFuncs.map(a=>a.toString()).join("\n\n\n");

        //these are examples of before and after webpack's transformation: (which the regex below finds the var-name of)
        //     require("react-redux-firebase") => var _reactReduxFirebase = __webpack_require__(100);
        //     require("./Source/MyComponent") => var _MyComponent = __webpack_require__(200);
        let regex = /var ([a-zA-Z_]+) = __webpack_require__\(([0-9]+)\)/g;
        let matches = [];
        let match;
        while (match = regex.exec(allModulesText))
            matches.push(match);

        for (let [_, varName, id] of matches) {
            //these are examples of before and after the below regex's transformation:
            //     _reactReduxFirebase => react-redux-firebase
            //     _MyComponent => my-component
            //     _MyComponent_New => my-component-new
            //     _JSONHelper => json-helper
            let moduleName = varName
                .replace(/^_/g, "") //remove starting "_"
                .replace(new RegExp( //convert chars where:
                          "([^_])"      //is preceded by a non-underscore char
                        + "[A-Z]"       //is a capital-letter
                        + "([^A-Z_])",  //is followed by a non-capital-letter, non-underscore char
                    "g"),
                    str=>str[0] + "-" + str[1] + str[2] //to: "-" + char
                )
                .replace(/_/g, "-") //convert all "_" to "-"
                .toLowerCase(); //convert all letters to lowercase
            moduleIDs[moduleName] = parseInt(id);
        }
    }
    return moduleIDs[name];
}

function Require(name) {
    let id = GetIDForModule(name);
    return WebpackData.c[id].exports;
}

expose-loader ist meiner Meinung nach eine elegantere Lösung:

require("expose-loader?libraryName!./file.js");
//Exposes the exports for file.js to the global context on property "libraryName".
//In web browsers, window.libraryName is then available.

Nachdem sowohl meine eigenen npm-Paket für diesen (siehe hier), sowie der Suche nach der ein bestehendes (siehe hier), ich fand auch einen Weg, um es in einer Zeile nur mit dem built-in-webpack-Funktionen.

Es nutzt WebPack "Kontexte": https://webpack.github.io/docs/context.html

Nur die folgende Zeile hinzufügen, um eine Datei direkt im "Source" Ordner:

window.Require = require.context("./", true, /\.js$/);

Nun können Sie es verwenden, (zB. in der Konsole) so:

let MyComponent = Require("./Path/To/MyComponent");
console.log("Retrieved MyComponent: " + MyComponent);

Jedoch ein wichtiger Nachteil dieses Ansatzes, im Vergleich zu den beiden Lösungen oben erwähnt, ist, dass es scheint nicht zu funktionieren für Dateien in den node_modules-Ordner. Wenn der Pfad angepasst werden, um "../", webpack nicht kompiliert werden kann-zumindest in meinem Projekt. (vielleicht, weil das node_modules-Ordner ist nur so Massiv)