Laravel 中,运行 NPM run dev 之后, jQuery 没有被编译到 public/JS/app.js

记录一个 BUG

前提

laravel版本5.7.13
下载好了node_modules整个文件夹

问题重现

第一步:执行 art perset none,将前端框架设置为 none
第二步:执行 art perset bootstrap,将前端框架设置为 bootstrap
第三步:执行 npm run dev进行编译,编译出来的 public/js/app.js 文件大小为591 KB
第四步:刷新网页,模态框不起作用,说明jQuery没有被编译到public/js/app.js文件中

原因

在我们使用art perset bootstrap命令的时候,resources/js/bootstrap.js文件内容被修改如下

window._ = require('lodash');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('......');
}

但是在该版本的 laravel 中,官方原版的文件内容如下:

window._ = require('lodash');
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('......');
}

说明在使用art perset bootstrap命令的之后,resources/js/bootstrap.js文件内容被改的有问题,此命令有 BUG

解决方案

复制官方文件中的内容,覆盖resources/js/bootstrap.js文件,重新运行 npm run dev进行编译,public/js/app.js 文件大小变成了为 1.07 MB,说明 jQuery已经被编译进去了,刷新网页,模态框起作用了

本作品采用《CC 协议》，转载必须注明作者和本文链接