未从webpack.mix加载npm包



我有一个Laravel项目,它正在使用webpack。在我的项目中,我已经运行了一些npm包,例如jquery。现在,我需要安装jqueryui来在我的应用程序中显示一些对话框。

我使用以下命令安装了jquery ui:

npm i jquery-ui --save-dev

我可以在node_modules中看到jquery ui文件夹,但它没有加载到我的应用程序中。

我还试图在第二个vendor.js文件中提取jquery-ui包,但没有成功。

这是我的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'
});
}

这也是我的包.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"
}
}

关于我做错了什么,有什么建议吗?

尝试在app.js文件中导入包

resources/js/backend/app.js

像这个

import jqueryui from 'jquery-ui'

最新更新