如何做一个同步要求的WebPack的构建模块，从*外*的WebPack的建设

说我有一个HTML文件中像这样：如何做一个同步要求的WebPack的构建模块，从*外*的WebPack的建设

<!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使得它棘手一点做我想做的事情。

来源

2017-04-15 Alexander Mills

您的意思是如何延迟加载的模块？因为webpack在浏览器运行任何代码之前捆绑了所有需求。 –

@OmriLuzon我会没事的懒惰加载或不。但我使用同步这个词的原因:)“同步”意思是“不延迟加载”。如果它已经在Webpack构建中，那么它已经在那里被同步加载...理论上。 –

那么，如果在浏览器之前的所有代码都可以运行它们，那么同步和异步模块加载就毫无意义。 –

我想我对这个问题有一个答案，其实很聪明。该解决方案使用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>

这实际上是非常聪明的，我不认为它:)

来源

2017-04-18 02:26:51

如何做一个同步要求的WebPack的构建模块，从外的WebPack的建设

回答

如何做一个同步要求的WebPack的构建模块，从*外*的WebPack的建设

回答

相关问题

如何做一个同步要求的WebPack的构建模块，从外的WebPack的建设