如何在 laravel 9 中使用 jQuery UI 和 vite

Question

我正在学习 vite，并对将 jquery-ui 包含到项目中感到震惊。

库.ts

import * as jQuery from 'jquery';
declare global {
    interface Window {
        jQuery: typeof jQuery;
        $: typeof jQuery;
    }
}


window.$ = window.jQuery = jQuery;
require('jquery-ui-dist');

主要.ts

jQuery(function(){
  console.log("i am called")  // getting console output
  jQuery(".datepicker").datepicker(); // getting error in editor  Property 'datepicker' does not exist on type 'JQuery<HTMLElement>'
});

控制台输出

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/scss/libs.scss',
                'resources/scss/main.scss',
                'resources/css/app.css',
                'resources/js/libs.ts',
                'resources/js/main.ts',
            ],
            refresh: true,
        }),
    ],
    optimizeDeps:{
        esbuildOptions:{
          plugins:[
            esbuildCommonjs(['jquery','jquery-ui-dist/jquery-ui'])
          ]
        }
      }
});

包.json

    "devDependencies": {
        "@originjs/vite-plugin-commonjs": "^1.0.3",
        "@tailwindcss/aspect-ratio": "^0.4.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/line-clamp": "^0.4.0",
        "@tailwindcss/typography": "^0.5.4",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.4.0",
        "lodash": "^4.17.21",
        "postcss": "^8.1.14",
        "tailwindcss": "^3.1.6",
        "vite": "^2.9.11"
    },
    "dependencies": {
        "autoprefixer": "^10.4.7",
        "jquery": "^3.6.0",
        "jquery-ui": "^1.13.2",
        "jquery-ui-dist": "^1.13.1",
        "moment": "^2.29.4",
        "sass": "^1.53.0"
    }

Answer 1

这有点棘手且违反直觉，但是：

1. 在您的bootstrap.js文件中，导入 jQuery 并手动定义全局别名

import $ from 'jquery';
window.jQuery = window.$ = $;

2. 在您的 中app.js，导入bootstrap.js然后直接dist导入 jQuery-UI 文件

import './bootstrap.js';
import 'jquery-ui/dist/jquery-ui';

重要的是保留 jQuery 初始化boostrap.js（或在实际导入 jQuery-UI 之前从主文件导入的任何其他文件），以便强制执行 jQuery 导入和全局别名定义的完整解析。将所有内容保存在同一个文件中（导入 jQuery、定义别名、导入 jQuery-UI）以不同的顺序解析，并破坏事物：所有导入都是在执行其他代码（例如别名定义）之前管理的，因此当它轮到 jQuery-UI 初始化时，它找不到全局$对象。

该解决方案受到这篇文章的启发（即使在 Vite 配置中没有别名，它实际上也可以工作）。