Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Vite Js Yüklemeleri Hakkında

YalcinSahin

Merhaba,

app.js:

console.log('app.js-ilk');
import './bootstrap';
console.log('app.js-son');

bootstrap.js:

import _ from 'lodash';

window._ = _;

import axios from 'axios';

window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import Echo from 'laravel-echo';

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.origin,
    transports: ['websocket'],
});

import $ from 'jquery';

window.$ = window.jQuery = window.jquery = $;

import 'bootstrap';
import 'select2';

$(document).ready(() => {
    console.log($.fn.select2); // Eğer undefined ise hala yüklenmemiştir.
});

livewire blade dosyam:

<head>
    @vite(['resources/css/app.css','resources/js/app.js'])
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
<script type="module">
    $(document).ready(function () {
        $("#siteSelect").addClass('select2').select2();

        window.activeSiteID = $('select[name^="siteSelect"] option').filter(':selected').val();
        window.activeSiteName = $('select[name^="siteSelect"] option').filter(':selected').text();
    });
</script>
</body>

vite.config.js:

import {defineConfig, loadEnv} from 'vite';
import laravel from 'laravel-vite-plugin';
import {viteStaticCopy} from 'vite-plugin-static-copy';
import inject from '@rollup/plugin-inject';
import resolve from '@rollup/plugin-node-resolve';
import fs from 'fs';
import path from 'path';

const env = loadEnv('', '')

console.log('APP_URL: ' + (env.VITE_APP_URL));
console.log('HTTPS_KEY: ' + (env.VITE_HTTPS_KEY));
console.log('HTTPS_CERT: ' + (env.VITE_HTTPS_CERT));

export default defineConfig({
    server: {
        cors: true,
        host: '0.0.0.0', 
        port: 5173,
        strictPort: true,
        origin: env.VITE_APP_URL,
        https: {
            key: fs.readFileSync(path.resolve(__dirname, env.VITE_HTTPS_KEY)),
            cert: fs.readFileSync(path.resolve(__dirname, env.VITE_HTTPS_CERT)),
        }
    },
    plugins: [
        resolve(),
        inject({
            include: ['**/*.js'],
            $: 'jquery',
            jQuery: 'jquery',
            jquery: 'jquery'
        }),
        laravel({
            input: [
                'resources/js/app.js',
                'resources/css/app.css',
            ],
            refresh: false
        }),
        viteStaticCopy({
            targets: [
                {
                    src: 'node_modules/font-awesome/fonts/*',
                    dest: '../../public/build/fonts'
                },
                {
                    src: 'resources/css/fonts/*',
                    dest: '../../public/build/custom-fonts'
                }
            ]
        })
    ],
    resolve: {
        alias: {
            '/assets/images': path.resolve(__dirname, 'public/assets/images'),
            '/resources/fonts': path.resolve(__dirname, 'node_modules/font-awesome/fonts'),
            '/resources/custom-fonts': path.resolve(__dirname, 'resources/css/fonts')
        }
    }
});

Bu kodlara istinaden bazı şeyler sormak istiyorum. Birkaç gündür çok fazla şey denedim ama istediğim sonuca ulaşamadım.

inject plugini ile bu değişkenleri görürse js dosyalarında jquery import etsin diyorum. Böylelikle aslında jquery , $ undefined gibi kısımları atlattım.
jQuery.Deferred exception: $(...).addClass(...).select2 is not a function TypeError: $(...).addClass(...).select2 is not a function select2 veya bundan sonraki ekleyeceğim js kütüphane veya fonksiyonlar için nasıl süreci ilerletebilirim.

Dinamik import da denedim import (select2) şeklinde

select2(); veya select2($); gibi kısımlar da denedim

Burada import veya dinamik import kullanılırken belirli bir sıra ile yüklenmesini veya diğer script modülleri ile iletişimi nasıl sağlıyorsunuz?