我不知道如何在我的 Laravel 项目中包含 JavaScript 包。我一直在尝试安装软件包,但不知道它是如何工作的。例如:假设我想安装 Bootstrap 确认 ( http://bootstrap-confirmation.js.org/ )。
我从项目根文件夹安装它。
$ npm install bootstrap-confirmation2
之后,package.json 文件如下所示。
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.2.0",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.15.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"@types/bootbox": "^4.4.36",
"bootbox": "^5.1.2",
"bootstrap-confirmation2": "^4.1.0"
}
}
然后我将包添加到 app.js。
require('bootstrap-confirmation2');
我的 webpack.mix.js 看起来像这样:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
之后,我从控制台运行此命令:
npm run dev
如果我尝试使用我的 Bootstrap 确认包,它不起作用,没有错误,什么也没有。
<button class="btn btn-default" data-toggle="confirmation">Confirmation</button>
我知道问题不在包中,而是在我尝试安装包并将它们包含在打开应用程序后加载的 app.js 文件中的方式中。
我检查了 Chrome 开发工具中的“网络”选项卡,检查了“app.js”是否已加载,搜索了该文件,我安装并包含的包位于 JS 文件内,但它仍然无法工作。
感谢任何帮助。
最佳答案
在终端中,运行以下安装。
npm install bootstrap-confirmation2
package.json 现在应该如下所示。依赖项是 jQuery、Popper.js(针对 Bootstrap 4),当然还有 Bootstrap 4。
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-confirmation2": "^4.1.0",
"jquery": "^3.4.0",
"laravel-mix": "^4.0.15",
"popper.js": "^1.15.0"
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
app.css
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
app.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('bootstrap-confirmation2');
} catch (e) {}
在您的 Blade 模板/布局中:
<a class="btn btn-large btn-primary" data-toggle="confirmation" data-title="Open Google?"
href="https://google.com" target="_blank">Confirmation</a>
在文件末尾,结束正文标记之后:
</body>
<script src="{{ mix('js/app.js') }}"></script>
在 app.js 中...
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
// other options
});
在终端:
npm run prod
我希望这有帮助。
关于laravel - 无法获取任何可与 Laravel Mix 配合使用的包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55774105/