Блог

Я не могу понять, как включить пакеты JavaScript в мой проект Laravel. Я пытался установить пакеты, и я не могу понять, как это работает. Например: допустим, я хочу установить подтверждение начальной загрузки (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
  

Если я попытаюсь использовать свой пакет подтверждения начальной загрузки, он не сработает, никаких ошибок, ничего.

 <button class="btn btn-default" data-toggle="confirmation">Confirmation</button>
  

Я знаю, что проблема не в пакете, а в том, как я пытаюсь устанавливать пакеты и включать их в свой app.js файл, который загружается, как только я открываю приложение.

Я проверил вкладку «Сеть» в Chrome dev tools, проверил, что ‘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) {}
  

В вашем шаблоне / макете блейда:

 <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
  

Надеюсь, это помогло.