Многочисленные ошибки консоли JS после обновления до Laravel 5.6 и переключения с Gulp на Laravel-Mix - PullRequest
Новая
       14

Многочисленные ошибки консоли JS после обновления до Laravel 5.6 и переключения с Gulp на Laravel-Mix

0 голосов
/ 21 марта 2019

Я недавно обновился до Laravel 5.6, так как мне нужно использовать Passport, и воспользовался возможностью переключиться с Gulp на Laravel-mix.

npm run dev и run prod работают нормально, но яя вращаюсь по кругу с бесконечными js-ошибками в консоли, такими как 

jQuery.Deferred exception: ClipboardJS is not defined ReferenceError: ClipboardJS is not defined

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

Мой (упрощенный) app.js выглядит следующим образом 

require('jquery');
require('./bootstrap');
require('bootstrap-datepicker');
require('vue');
require('select2');
require('chart.js');
require('chartist');

$(document).ready(function() {

    var clipboard = new ClipboardJS('.btn-copy');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });

});

Мой webpack.mix.js выглядит следующим образом 

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
    .js('resources/assets/js/app.js', 'public/js')
        .extract([
              'jquery',
              'select2',
              'jquery-validation',
              'bootstrap',
              'bootstrap-datepicker',
              'jasny-bootstrap',
              'chartist',
              'cropper',
              'moment',
              'vue'
        ])

    .js('resources/assets/js/proto.js', 'public/js')

    .sass('resources/assets/sass/app.scss', 'public/css')

    .sourceMaps();

Мой 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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "bootstrap-datepicker": "^1.6.1",
    "bootstrap-sass": "^3.4.1",
    "chartist": "^0.11.0",
    "cropit": "^0.5.1",
    "cropper": "^4.0.0",
    "cross-env": "^5.2.0",
    "del": "^4.0.0",
    "font-awesome": "^4.7.0",
    "graceful-fs": "^4.1.15",
    "jquery": "^3.3.1",
    "jquery-validation": "^1.19.0",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-delete": "^1.0.1",
    "laravel-elixir-uglify": "^2.0.1",
    "laravel-mix": "^4.0.15",
    "lodash": "^4.16.2",
    "node-sass": "^4.11.0",
    "resolve-url-loader": "^3.0.1",
    "sass": "^1.17.3",
    "sass-loader": "^7.1.0",
    "url-loader": "^1.1.2",
    "vue": "^2.6.8",
    "vue-template-compiler": "^2.6.9",
    "webpack": "^4.29.6"
  },
  "dependencies": {
    "acorn": "^6.1.1",
    "ajv": "^6.10.0",
    "chart.js": "^2.8.0",
    "clean-css": "^4.2.1",
    "deep-extend": "^0.6.0",
    "hoek": "^6.1.2",
    "imagemin": "^6.1.0",
    "jasny-bootstrap": "^4.0.0",
    "minimatch": "^3.0.4",
    "moment": "^2.24.0",
    "popper.js": "^1.14.7",
    "select2": "^4.0.6-rc.1"
  }
}

и я ссылаюсь на скомпилированные файлы вот так 

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

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

Кто-нибудь может помочь?Я очень смущен и уверен, что делаю что-то не так.

Спасибо, Дэн

...