npm package 未從 webpack.mix 加載

Question

我有一個 Laravel 項目，它正在使用 webpack。 在我的項目中，我已經運行了一些 npm 包，例如 jquery。 現在，我需要安裝 jquery-ui 以在我的應用程序中顯示一些對話框。

我已經使用以下命令安裝了 jquery-ui：

npm i jquery-ui --save-dev

我可以在 node_modules 中看到 jquery-ui 文件夾，但它沒有加載到我的應用程序中。

我還嘗試在第二個 vendor.js 文件中提取 jquery-ui package ，但沒有任何反應。

這是我的 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"
    }
}

關於我做錯了什么的任何建議？

Answer 1

嘗試在 app.js 文件中導入 package

resources/js/backend/app.js

像這樣

import jqueryui from 'jquery-ui'