Laravel项目中jquery-ui无法通过webpack.mix加载的问题求助

问题描述 #

我有一个使用webpack的Laravel项目，项目中已运行jquery等npm包。现在需要安装jquery-ui来实现对话框功能，已执行命令npm i jquery-ui --save-dev，node_modules中存在jquery-ui文件夹，但它并未在应用中加载。我尝试将jquery-ui提取到第二个vendor.js文件中，但没有效果。以下是我的webpack.mix.js和package.json配置：

webpack.mix.js #

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

mix.setPublicPath('public')
    .setResourceRoot('../') // Turns assets paths in css relative to css file
    .vue()
    .sass('resources/sass/frontend/app.scss', 'css/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend.css')
    .js('resources/js/frontend/app.js', 'js/frontend.js')
    .js('resources/js/backend/app.js', 'js/backend.js')
    .extract([
        'alpinejs',
        'jquery',
        'bootstrap',
        'popper.js',
        'axios',
        'sweetalert2',
        'lodash'
    ])
    .extract(['jquery-ui'], 'js/vendor~utils-2.js')
    .sourceMaps();

if (mix.inProduction()) {
    mix.version();
} else {
    // Uses inline source-maps on development
    mix.webpackConfig({
        devtool: 'inline-source-map'
    });
}

package.json #

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@coreui/coreui": "^3.0.0",
        "@coreui/icons": "^1.0.1",
        "@fortawesome/fontawesome-free": "^5.12.1",
        "@popperjs/core": "^2.5.1",
        "alpinejs": "^2.3.5",
        "axios": "^0.21.1",
        "bootstrap": "^4.5.0",
        "cross-env": "^7.0",
        "jquery": "^3.5.1",
        "jquery-ui": "^1.13.2",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "perfect-scrollbar": "^1.5.0",
        "popper.js": "^1.16.1",
        "postcss": "^8.1",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "sweetalert2": "^9.8.2",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10"
    }
}

解决方案 #

1. 暴露JQuery到全局作用域 #

JQuery-UI依赖全局的jQuery或$对象，需要在webpack.mix.js中添加autoload配置，确保JQuery全局可用：

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

// 添加这一行
mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery']
});

mix.setPublicPath('public')
    // ... 其余原有配置保持不变

2. 按需引入JQuery-UI组件 #

JQuery-UI的npm包采用模块化结构，不能直接整体引入，需要手动导入你需要的组件（比如对话框）。在你的业务入口JS文件（如resources/js/frontend/app.js）中添加：

// 引入JQuery-UI核心
import 'jquery-ui/ui/core';
// 引入对话框组件
import 'jquery-ui/ui/widgets/dialog';
// 引入JQuery-UI基础样式（如果需要）
import 'jquery-ui/themes/base/all.css';

3. 调整Extract配置（可选） #

如果你需要将JQuery-UI打包到单独的vendor~utils-2.js文件，必须确保入口文件中已经引用了JQuery-UI组件，webpack的extract只会处理被实际引用的模块。保留原有extract配置即可：

.extract(['jquery-ui'], 'js/vendor~utils-2.js')

4. 重新编译资源 #

执行编译命令更新打包文件：

npm run dev

生产环境使用：

npm run prod

5. 验证页面脚本加载顺序 #

确保页面中脚本的加载顺序正确：

1. vendor.js（包含JQuery等基础依赖）
2. vendor~utils-2.js（包含JQuery-UI）
3. 业务JS文件（如frontend.js）

错误的加载顺序会导致JQuery-UI找不到JQuery依赖。

内容的提问来源于stack exchange，提问作者Vince Carter