Question

假设我有一个像这样的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来创建bundle / build，如果这样可以更容易地从构建之外的构建中要求模块。

我尝试使用RequireJS和SystemJS这样做 - 这两个工具可以让我更容易做我想做的事情。但显然使用RequireJS或SystemJS从NPM包创建深层构建非常困难，在这种情况下，我需要一个包含许多NPM deps的深层构建。我甚至尝试使用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会让我做的事情变得有点棘手。

Answer 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格式化。但这并不重要，因为在捆绑之外，我们将有办法要求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>

这实际上非常聪明，我没想到：）

如何做Webpack构建模块的同步需求，来自*外部的Webpack构建

1 个答案: