按ID

Question

如何从控制台要求（）/导入模块？例如，假设我已经安装了ImmutableJS npm，我希望能够在我在控制台中工作时使用模块中的功能。

Answer 1

将此项包含在模块中将允许从浏览器中使用require([modules], function)

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);
}

示例用法：

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

注意：每个switch-statement选项应该是此模块已经需要的东西，或者由ProvidePlugin提供

来源：

基于 this answer ，可用于添加整个文件夹。

来自 Webpack Docs 的替代方法 - 允许require.yourModule.function()

之类的内容

Answer 2

这是另一种更通用的方法。

按ID

要求模块

当前版本的WebPack公开webpackJsonp(...)，可用于按ID要求模块：

function _requireById(id) {
  return webpackJsonp([], null, [id]);
}

或在TypeScript中

window['_requireById'] =
  (id: number): any => window['webpackJsonp'];([], null, [id]);

ID在捆绑文件中的模块顶部或通过源地图提供的原始源文件的页脚中可见。

按名称要求模块

按名称要求模块要复杂得多，因为WebPack在处理完所有源后似乎不会对模块路径进行任何引用。但是在以下代码中似乎可以解决很多问题：

/**
 * 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]
    );
  });
}

这是第一次快速拍摄，所以一切都在改进！

Answer 3

能够在控制台中使用require模块，便于调试和代码分析。 @ psimyn的答案非常具体，因此您不太可能使用您可能需要的所有模块维护该功能。

当我需要一个我自己的模块用于此目的时，我为它分配一个窗口属性，以便我可以得到它，例如window.mymodule = whatever_im_exporting;。如果我想玩它，我会使用相同的技巧来暴露系统模块，例如：

myservice.js：

let $ = require('jquery');
let myService = {};

// local functions service props etc...

module.exports = myService;

// todo: remove these window prop assignments when done playing in console
window.$ = $;
window.myService = myService;

这仍然有点痛苦，但是在挖掘捆绑包时，我看不出任何方便地映射模块的方法。

Answer 4

我找到了一种适用于WebPack 1和2的方法（只要源是非缩小的）

回购：https://github.com/Venryx/webpack-runtime-require

安装

npm install --save webpack-runtime-require

用法

首先，要求模块至少一次。

import "webpack-runtime-require";

然后它会向窗口对象添加一个Require（）函数，以便在控制台或代码中的任何位置使用。

然后就这样使用它：

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

它不是很漂亮（它使用正则表达式来搜索模块包装器函数）或快速（第一次调用大约需要50ms，之后大约需要0ms），但如果它们都是完全正常的话，那么它们都非常好。只是在控制台中进行黑客测试。

技术

以下是源的修剪版本，以显示其工作原理。（参见完整/最新的回购）

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;
}

Answer 5

你可以做类似psimyn建议的事情将以下代码添加到bundle中的某个模块：

require.ensure([], function () {
    window.require = function (module) {
        return require(module);
    };
});

从控制台使用require：

require("./app").doSomething();

Answer 6

在我看来，

expose-loader是一个更优雅的解决方案：

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.

Answer 7

为此创建了一个npm模块（参见我的other answer）后，我在npms.io上进行了搜索，似乎找到了一个可用于此目的的现有webpack-plugin。

回购：https://www.npmjs.com/package/webpack-expose-require-plugin

安装

integer        ::=  decimalinteger | octinteger | hexinteger | bininteger
decimalinteger ::=  nonzerodigit digit* | "0"
octinteger     ::=  "0" ("o" | "O") octdigit+ | "0" octdigit+

用法

将插件添加到webpack配置中，然后在运行时使用，如下所示：

npm install --save webpack-expose-require-plugin

有关详细信息，请参阅package / repo自述文件页面。

修改

我在自己的项目中尝试了这个插件，但是无法让它工作;我一直收到错误：let MyComponent = require.main("./path/to/MyComponent"); console.log("Retrieved MyComponent: " + MyComponent);。不过，我会留在这里，以防它适用于其他人。（我目前正在使用上面提到的解决方案）

Answer 8

在为此创建我自己的npm包（see here）之后，以及找到现有的（see here）之后，我还找到了一种方法，只需使用内置的webpack功能。

它使用WebPack“上下文”：https://webpack.github.io/docs/context.html

只需将以下行直接添加到“Source”文件夹中的文件：

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

现在你可以使用它（例如在控制台中），如下所示：

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

然而，与上面提到的两个解决方案相比，这种方法的一个重要缺点是它似乎不适用于node_modules文件夹中的文件。当路径调整为“../”时，webpack无法编译 - 至少在我的项目中。（可能因为node_modules文件夹太大了）

Answer 9

将以下代码添加到您的某个模块中将允许您按ID加载模块。

window.require = __webpack_require__;

在控制台中使用以下内容：

require(34)

如何使用webpack从控制台中获取（）？

9 个答案:

来源：

按ID

按名称要求模块

安装

用法

技术

安装

用法