升级到Laravel 5.6并从Gulp切换到Laravel-Mix

时间:2019-03-21 18:45:12

标签: javascript jquery node.js laravel laravel-mix

我最近已升级到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>

有人可以帮忙吗?我很困惑,并且确定自己做错了事。

谢谢, 丹

0 个答案:

没有答案