我正在学习 vite,并且对将 jquery-ui 包含到项目中感到震惊。
libs.ts
import * as jQuery from 'jquery';
declare global {
interface Window {
jQuery: typeof jQuery;
$: typeof jQuery;
}
}
window.$ = window.jQuery = jQuery;
require('jquery-ui-dist');
main.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'])
]
}
}
});
package.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"
}
您需要为 datetimepicker 包含 typescript 类型,以便 TypeScript 知道它
npm i @types/jquery.ui.datetimepicker