如何使用webpack从控制台中获取()？

Question

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

Answer 1

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

按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 2

将其包含在模块中将允许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提供

资料来源:

基于此答案,可用于添加整个文件夹.

Webpack Docs的替代方法- 允许类似的东西require.yourModule.function()