Question

我正在努力寻找一种“快速”的方式来将一些旧式javascript文件从资源转换为webpack。我（认为我）需要找到一种方法来捆绑一组javascript文件，方法是简单地将它们串联在一起，而不必将webpack打包在jsonp中。

我们的平台是使用Symfony构建的，使用的是树枝模板，并且我们使用资产式（大多数情况是简单地串联和缩小）加载了大多数旧版javascript文件，而webpack捆绑了更新的javascript / typescript文件。< / p>

自然，我想删除所有资产依赖项，并使用webpack捆绑旧的javascript。但是，由于webpack生成捆绑包的方式，它被包裹在jsonp中，并且这些javascript文件中定义的任何函数/变量在全局范围内均不可用。

在一个资产丰富的世界中，我们的树枝文件杂乱无章：

{%- javascripts
    '%kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-transition.js'
    '@MyBundle/Resources/js/legacy-1.js'
    '@MyBundle/Resources/js/legacy-2.js'
    filter="?uglifyjs2"
    output="js/compiled/page-one.js" %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

将所有串联并最小化。我想用类似的webpack版本代替它。

我已经确定了一些方法，但是我不确定它们中的任何一种都是最好的。

使用script-loader获取要在全局范围内加载的脚本-由于script-loader使用了eval，而CSP已将其禁用，因此这是不可能的
重写每个javascript文件，将成员暴露在窗口中。 -这可能是最简单的选择，但我真的不喜欢这个主意，它与最佳做法背道而驰。
重写每个javascript文件，导出成员，然后使用expose-loader加载文件，然后遍历所有树枝文件并使用全局名称空间更新对成员的引用。这将花费很多时间，并且我宁愿完全不要这样做

我认为我可以简单地配置一个queryParameter和file-loader来加载每个参数，但是我需要每个资源一个脚本标签，并且会失去捆绑的本性。（我使用Symfony webpack捆绑包为webpack生成了entries列表，并提供了树枝功能以在运行时从CDN加载条目）

<script src='{{ webpack_asset('%kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-transition.js?asFile') }}"></script>
<script src='{{ webpack_asset('@MyBundle/Resources/js/legacy-1.js?asFile') }}"></script>
<script src='{{ webpack_asset('@MyBundle/Resources/js/legacy-2.js?asFile') }}"></script>

所以我正在寻找一种将文件串联在一起的方法。创建单独的条目文件并将其作为文件加载还不够好，因为require s / import s不会得到解决。

我知道webpack-concat-plugin将要求我定义所有各种文件以在webpack配置中预先连接，这实际上是不可能的。

我还没有遇到过用该js文件的内容替换import '@MyBundle/Resources/js/legacy-2.js'的加载器-但也许我丢失了一些东西。

我想知道所有这些努力之后，试图找到一个简单的解决方案是否比重写传统JavaScript以使用模块的努力更大……

我找到了以下答案，但它们并没有真正帮助我

Webpack - How to load non module scripts into global scope | window-假设我可以定义要串联的文件。我有将近100种不同的资源使用资产，其中几乎所有都使用不同的文件。
Webpack - How to load non module scripts into global scope | window-eval被我们的CSP禁用
Expose javascript globals bundled via webpack-正如我所提到的，我并不是真的想为此创建100个“入口”文件，并且webpack-raw-bundler还要求在webpack配置文件中预先定义所有内容。

如何使用webpack合并和捆绑JS文件以将其加载到脚本标签中

0 个答案: