时间戳

首页 > 解决方案 > 如何使用 webpack 连接和捆绑 JS 文件以加载到脚本标签中

javascript - 如何使用 webpack 连接和捆绑 JS 文件以加载到脚本标签中

问题描述

我正在努力寻找一种“快速”的方式将一些遗留的 javascript 文件从资产转换为 webpack。我（想我）需要找到一种方法来捆绑一组 javascript 文件，只需将它们连接起来，而不是让 webpack 将其包装在 jsonp 中。

我们的平台是在 Symfony 中构建的，使用 twig 模板，我们已经使用资产加载了大部分遗留的 javascript 文件（它只是连接和缩小），我们有与 webpack 捆绑的更新的 javascript/typescript 文件。

自然地，我想删除所有资产依赖并使用 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 版本替换它。

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

  1. 用于script-loader让脚本在全局范围内加载 - 由于script-loader使用evalCSP 禁用，因此这是不可能的
  2. 重写每个 javascript 文件，在窗口中公开成员。- 这可能是最简单的选择，但我真的不喜欢这个想法，而且它违背了最佳实践。
  3. 重写每个 javascript 文件，导出成员，然后使用expose-loader加载文件，然后遍历所有 twig 文件并使用全局命名空间更新对成员的引用。这将花费很多时间，如果可能的话，我宁愿不这样做

我想我可以简单地配置一个 queryParameter 并file-loader加载每个，但我需要每个资源一个脚本标签，并且会失去捆绑性质。（我使用 Symfony webpack 包entries为 webpack 生成一个列表，并提供 twig 函数用于在运行时从 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>

所以我正在寻找一种将文件连接在一起的方法。创建一个单独的条目文件并将其作为文件加载是不够的，因为无法解析requires/ s。import

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

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

我想知道在所有这些努力之后试图找到一个简单的解决方案是否比重写遗留 javascript 以使用模块的努力更大......

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

标签： javascriptwebpackwebpack-loader

解决方案

推荐阅读