【问题标题】:Laravel Mix my javascript code is not runningLaravel Mix 我的 javascript 代码没有运行
【发布时间】:2017-11-23 13:17:40
【问题描述】:

我正在使用 Laravel 在编译资产时遇到问题。默认情况下,laravel 为 webpack 提供了一个包装器,即laravel-mixlaravel-mix,使用名为webpack.mix.js 的文件,并使用npm run dev 命令laravel-mix将所有js 文件编译成一个webpack 包js 文件。

webpack.mix.js 的代码:

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

我有一个 Main.js 文件,其中包含一些 jquery 代码。

Main.js:

;( function( $, window, document, undefined ) {

    'use strict';
    $(window).on('load', function() {
        alert('ready');
    });
 }
)( jQuery, window, document );

我的目录结构是这样的

resources\assets\js

app.js
bootstrap.js
Main.js

app.js 代码:

require('./bootstrap');

bootstrap.js 代码:

try {
    window.$ = window.jQuery = require('jquery');// jquery
    require('bootstrap');// bootstrap framework js
    require('./Main'); // Main.js


} catch (e) {
}

当我键入命令 npm run dev 时,所有资产都编译到一个文件中,那么为什么我的 Main.js jquery 代码(它只是一个警报弹出窗口)不会在页面上执行。

但是当我将bootstrap.js 文件的顺序更改为类似这样时,我的Main.js 代码将被执行。

try {
    window.$ = window.jQuery = require('jquery');// jquery
    require('./Main'); // Main.js
    require('bootstrap');// bootstrap framework js



} catch (e) {
}

为什么会发生这种情况。 bootstrap framework js 文件和Main.js 文件之间是否发生冲突。

【问题讨论】:

  • 您的代码不执行时能否提供浏览器控制台?
  • @nmfzone 没有出现任何错误,但是当我加载我的页面时,我的 Main.js 脚本没有执行

标签: laravel laravel-mix


【解决方案1】:

回复 cmets 中的 tldr:

没有出现任何错误,但是当我加载我的页面时,我的 Main.js 脚本没有执行

我遇到了同样的问题,包括 manifest.jsvendor.js 解决了这些问题:

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>

【讨论】:

  • 谢谢!尝试解决类似问题 2 小时。现在它是固定的。不知道 .extract() 应用于你用 mix 编译的每个 js!
  • 是的,它适用于每个 js 文件。它查看所有包含的 js 文件的所有依赖项,然后确定应该包含在 vendor.js 中的内容。而“启动脚本”(调用从入口点创建的捆绑 JavaScript 文件的脚本)是 manifest.js,因此也应该包含它。
猜你喜欢
  • 1970-01-01
  • 2018-06-28
  • 2018-03-04
  • 1970-01-01
  • 1970-01-01
  • 2021-04-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多