web-dev-qa-db-ja.com

Laravel 5 WebPack JQuery-$が定義されていません

私はwebpack.min.jsを持っています：

_mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default'],
            })
        ]
    };
});

mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
    .js('resources/assets/scripts/index.js', 'public/js/app.js')
    .copyDirectory('resources/assets/static', 'public/static')
    .version()
    .sourceMaps();
_

そしてpackage.json：

_"devDependencies": {
    "jquery": "^3.3.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-datepicker": "^1.7.1",
    "browser-sync": "^2.24.6",
    "browser-sync-webpack-plugin": "^2.0.1",
    "chart.js": "^2.7.2",
    "cross-env": "^5.2.0",
    "datatables": "^1.10.18",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "^3.9.0",
    "jquery-sparkline": "^2.4.0",
    "jvectormap": "^2.0.4",
    "laravel-mix": "^2.1.11",
    "load-google-maps-api": "^1.2.0",
    "lodash": "^4.17.10",
    "masonry-layout": "^4.2.2",
    "perfect-scrollbar": "^1.1.0",
    "popper.js": "^1.14.3",
    "skycons": "^1.0.0",
    "vue": "^2.5.16"
  }
_

そして私のブレードフッタースクリプトで：

_@section('footer')
    <script type="text/javascript">
        if (typeof jQuery != 'undefined') { alert(jQuery.fn.jquery); }

        $(function() {
        $('#cc-number').validateCreditCard(function(result) {
            $('.log').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
                + '<br>Valid: ' + result.valid
                + '<br>Length valid: ' + result.length_valid
                + '<br>Luhn valid: ' + result.luhn_valid);
        });
        });
    </script>
@endsection
_

_npm run dev_を実行してページを読み込んだ後、エラーが表示されます：

キャッチされていないReferenceError：$が定義されていません

私のalert(jQuery.fn.jquery);がトリガーされない

どのようにnpmからjqueryをロードしてブレードのインラインhtmlコードで使用できるようにするのですか？

jquerylaravellaravel-5webpacklaravel-5.6
4
AnD

Main.jsファイルでこれを試してください

global.$ = global.jQuery = require('jquery');
13
Odyssee

Laravel 5.7で提供されているいくつかのデフォルトビューを使用しようとすると、この問題が発生しました。デフォルトを拡張するいくつかのブレードビューテンプレートでJavaScript（jQueryを使用する必要があります）を使用しようとしましたlayout/app.blade.php template。

しかし、私にとって問題はではなかったwindow.$がresources/js/bootstrap.jsファイルに関する限り追加されていたため、window.jQueryライブラリが割り当てられていませんでした。 （これは、Laravel Mixによってpublic/js/app.jsにプリコンパイルされているように見えるファイルです。これは、webpack.mix.jsを調べて、その中にあることがわかります。このステートメントは次のとおりです。

mix.js('resources/js/app.js', 'public/js')

どこ

resources/js/app.jsにはresources/js/bootstrap.jsが必要です。

これを自分で手動でコンパイルする場合は、最初に次のコマンドを実行します。

npm install次に開発モードの場合はnpm run dev、プロダクションモードの場合はnpm run prod。

とにかく（私は脱落しました）....

問題はここにあることが判明しました：

resources/views/layouts/app.blade.php

次のようなdefer属性を持つスクリプトタグのインスタンスがありました。

<script src="{{ asset('js/app.js') }}" defer></script>

そのdefer属性がすべての問題の原因でした。

だから私はそれを次のように削除しました：

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

そしてjQueryが定義されていない問題が解決されました。

いずれにしても、スクリプトタグをbody HTMLタグの末尾に近づけるだけで、JavaScriptの読み込みを遅らせたいと思います。

9
racl101

app.blade.php

<script src="{{ asset('js/app.js') }}" defer></script>

延期を削除するのでそれを作る

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

https://github.com/laravel/framework/issues/17634#issuecomment-37547399

7
Ahmed Aboud

私はjQueryにmix.jsの代わりにmix.copyを使用します。

例：

mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/vendor/jquery/jquery.min.js');
1
Денис Кисель