Не удается получить пакеты для работы с Laravel Mix - PullRequest
Новая
       18

Не удается получить пакеты для работы с Laravel Mix

1 голос
/ 20 апреля 2019

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

Любая помощь приветствуется.

1 Ответ

1 голос
/ 22 апреля 2019

В терминале запустите установку: 

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

Screenshot

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

...