如何从 Webpack 构建的 *outside* 执行 Webpack 构建模块的同步需求答案

【问题标题】：How to do a synchronous require of Webpack build module, from *outside* of Webpack build如何从 Webpack 构建的 *outside* 执行 Webpack 构建模块的同步需求
【发布时间】：2017-09-11 08:01:44
【问题描述】：

假设我有一个这样的 HTML 文件：

<!DOCTYPE html>          
 <meta charset="UTF-8">
 <title>Suman tests</title>
 <head>
 <script src="../dist/suman.js"></script>   <-- webpack build here

    // how can I do a synchronous require() here, from something
    // inside the Webpack build?

 </script>
</head>
<body>
</body>
</html>

正如脚本标签中的评论所说，我试图弄清楚：如何从几乎任何旧的 JavaScript 代码中导入/要求从 Webpack 构建内部的东西？

有可能吗？如何？ ...我可以在构建中设置全局变量，但我想知道是否还有其他更好的方法。

注意：

我愿意使用 Browserify 而不是 Webpack 来创建包/构建，如果这样可以更容易地从构建中请求模块，从构建外部。

我尝试用 RequireJS 和 SystemJS 来做这件事——这两个工具会让我更容易做我想做的事。但显然，使用 RequireJS 或 SystemJS 从 NPM 包创建深度构建非常困难，在这种情况下，我需要一个包含许多 NPM 依赖的深度构建。我什至尝试使用 TypeScript 转译器来创建深度构建，但无济于事。所以看起来它必须是 Browserify 或 Webpack，但我对任何可能的工作持开放态度。

请注意，如果我们使用 AMD 或 SystemJS，这将很简单：

<head>
  <script src="../dist/suman-amd.js"></script>   <--AMD build here
  <script src="../dist/suman-system.js"></script>   <--SystemJS build here
  <script>

       // using AMD

        define(['/a-module-from-amd-build'], function(myMod){

            // my unique code goes here

        });

        // or with SystemJS 

       System.register('my-module', ['a-module-from-system-build'], function(myMod){

             // my unique code goes here

       });

  </script>
</head>

但是使用 Webpack/Browserify 让做我想做的事情变得有点棘手。

【问题讨论】：

你的意思是如何延迟加载模块？因为 webpack 在浏览器运行任何代码之前捆绑了所有的需求。
@OmriLuzon 我可以接受延迟加载。但我使用同步这个词是有原因的 :) “同步”的意思是“不是延迟加载”。如果它已经在 Webpack 构建中，那么它已经可以同步加载了……理论上。
好吧，如果所有代码在浏览器可以运行之前捆绑在一起，那么同步和异步模块加载就毫无意义。
不是真的，你可以加载代码，然后异步加载更多代码。我个人喜欢异步/延迟加载，但在这种情况下，我希望只进行严格同步的 require() 调用。
所以你的意思是代码已经在包中，所以不需要它，这是默认行为。

标签： javascript html webpack webpack-2

【解决方案1】：

我想我对这个问题有一个答案，其实很聪明。该解决方案使用 Webpack。

在使用 Webpack 构建之前，在我们的后端代码中，我们会这样做：

global.require = name => {        // global is window
 switch (name) { 
    case 'async': 
    return require('async');
    case 'bluebird': 
    return require('bluebird') 
    case 'socket.io': 
    return require('socket.io') 
     // etc etc
  } 
}

我们需要使用完整/实际路径，而不是动态路径，这样 Webpack 才能完成它的工作。

Webpack 将包含此代码作为构建的一部分并将 F 从中删除。但这没关系，因为在捆绑包之外，我们将有一种方法来 require Webpack 模块。

<script src="../dist/suman.js"></script>   <-- webpack build here
<script>

     // this will pull async from inside the Webpack build
     const async = window.require('async'); 
     const socketio = window.require('socket.io'); 
     const Promise = window.require('bluebird');  

</script>

这其实很聪明，我没想到:)

【讨论】：