为什么我使用 Laravel 得到未定义的 JS？答案

【问题标题】：Why do I get undefined JS with Laravel?为什么我使用 Laravel 得到未定义的 JS？
【发布时间】：2019-02-21 22:46:49
【问题描述】：

我正在使用 Laravel，并且在我的 bootstrap.js 文件中有

window.ProgressBar = require('progressbar.js');

然后我需要将bootstrap.js 文件放入app.js

require('./bootstrap');

我使用webpack.mix.js编译它

mix.js('resources/assets/js/app.js', 'public/js')

如果我尝试访问app.js 内的progressbar.js，它会完美运行。

但是，如果我尝试在我页面上的 app.js 之后的脚本标记中的 app.js 之外使用它，ProgressBar 就是 undefined。

如何在我的app.js 之外访问ProgressBar，但通过app.js 将其导入？

index.blade.php 上的示例

<script src="app.js" defer></script>
<script>
  const progress = new ProgressBar; //undefined...
</script>

【问题讨论】：

你确定你没有定义吗？对我来说似乎无法重现。你真的不应该依赖浏览器中的const 实现。
@Devon 你试过重现它吗？其次，为什么我不应该使用 const ？你是说我应该改用let 或var 吗？
是的，它工作正常。 const 和 let 都是 es6，es6 的特性可能不会在所有浏览器中实现。
@Devon 终于弄明白了。我在<script> 标签上有defer，由于某种原因，它停止了工作。至于const 和let - caniuse.com/#search=const caniuse.com/#search=let 基于此，我很乐意使用它
错过了，是的，这会导致它，因为您正在异步加载脚本，因此新的 ProgressBar 行将在您的 app.js 加载之前执行。我发现很多人仍然在使用 IE 使用 Win 7，但如果你不支持他们，这取决于你。

标签： javascript laravel ecmascript-6 laravel-mix

【解决方案1】：

我认为，即使您将 ProgressBar 分配给了 window，Webpack 也会对您隐藏 ProgressBar。因为你知道，Webpack 认为 bundle 包含了你应用的所有代码。解决方案？不要捆绑它！而是使用缩小版的ProgressBar 并像过去一样加载它。完全没问题，好几纳秒或差几纳秒，不明显。

【讨论】：

但是如果我也想在app.js 中使用它怎么办？这意味着我现在已经加载了 2 个 progressbar.js 实例，所以我认为这不是一个好的解决方案
我已经考虑过了。不幸的是，情况似乎如此。好吧，然后我会挖掘有关与捆绑包外部共享数据的 webpack 文档（使用 window 对象）。太糟糕了，我不是 Webpack 专家（坦率地说，我讨厌它）。好消息：这应该是一个非常简单的任务。您只需要找到一种方法以某种方式将属性分配给window。

【解决方案2】：

我在脚本标签上有defer，由于某种原因，它停止了工作。

解决方案：

<script src="app.js" defer></script>

改成

<script src="app.js"></script>

【讨论】：