导入Select2和Laravel Vite

Question

我正在尝试在我的 Laravel 10 项目中使用 select2，该项目正在使用 Vite。我一直收到错误

    Uncaught TypeError: $(...).select2 is not a function

我的问题：

在Vite中导入select2的正确方法是什么（无需 使用 Vite 配置别名）？我做错了什么？

我已经运行了

npm i select2

（来自我的package.json）

    "select2": "^4.1.0-rc.0",
    "vite": "^4.0.0"

我尝试了多种不同的导入方式，但最后都成功了

1. 更新我的 vite.config.js 文件（例如简化的）

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import path from 'path';
   
    export default defineConfig({
        plugins: [
            laravel({
                input: ['resources/sass/app.scss', 'resources/js/app.js'],
                refresh: true,
            }),
        ],
        resolve: {
            alias: {
                'select2': 'node_modules/select2/dist/js/select2.full.min.js',
   
            }
        },
    });
   

2. 在我的 app.js 中使用以下内容

    import 'select2';
    import '../../node_modules/select2/dist/css/select2.css';
   

奇怪的是

1. select2

   正在工作
2. 我收到控制台日志错误：无法加载网址

   /@fs/node_modules/select2/dist/js/select2.full.min.js (resolved id: /node_modules/select2/dist/js/select2.full.min.js? [...]

Answer 1

要使其在没有别名的情况下工作，请按照下列步骤操作：

1. 安装jquery和select2：

npm i jquery select2 --save-dev

2. 编辑 bootstrap.js 以引用 jquery 和 select2

// import jquery and select2
import $ from "jquery";
import select2 from 'select2';
window.$ = $; // <-- jquery must be set
select2(); // <-- select2 must be called

3. 在 app.js 中导入 select2 CSS

//-- Select2
import "/node_modules/select2/dist/css/select2.css";
//--
import '../css/app.css';
// ...

现在您可以在组件中使用它了：

$('.js-example-basic-single').select2();

Answer 2

$(document).ready(function() {
  $('.js-example-basic-single').select2();
})