Question

我不知道如何在我的Laravel项目中包含JavaScript包。我一直在尝试安装软件包，但无法弄清楚它是如何工作的。例如：假设我要安装Bootstrap Confirmation（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文件中，但仍然无法正常工作。

感谢您的帮助。

Answer 1

在终端中运行安装：

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标记之后：

</body>
<script src="{{ mix('js/app.js') }}"></script>

在app.js中...

$('[data-toggle=confirmation]').confirmation({
    rootSelector: '[data-toggle=confirmation]',
    // other options
});

在终端：

npm run prod

希望有帮助。

无法使任何软件包与Laravel Mix一起使用

1 个答案: