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

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

希望对你有所帮助。