如何通过 npm jquery-ui-datepicker-with-i18n 导入到 laravel?

Question

我是使用 npm 的新手，当我在我的项目中导入它时，我已经在我的项目中安装了包 jquery-ui-datepicker-with-i18n，它说Uncaught ReferenceError: jQuery is not defined但我安装了 jquery。

这是我的引导程序.js：

try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
window.jQueryUI = require('jquery-ui');
require('bootstrap');
} catch (e) {}

这是我的应用程序.js：

require('../bootstrap');
try {
window.daterangepicker = require('daterangepicker');
window.moment = require('moment');
window.dragscroll = require('dragscroll');
} catch (e) {}

import 'jquery-ui/ui/widgets/autocomplete.js';
import 'jquery-ui/ui/widgets/datepicker.js';
import 'jquery-ui/themes/base/all.css';
import 'jquery-ui-datepicker-with-i18n/ui/i18n/jquery.ui.datepicker-es.js';

我执行 npm run dev 并且编译正常，但随后我甚至没有调用此行就出现错误：

$.datepicker.setDefaults($.datepicker.regional['es']);

Package.json：

{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.4.1",
"cross-env": "^5.2.1",
"jquery": "^3.2",
"laravel-mix": "^4.1.4",
"lodash": "^4.17.15",
"popper.js": "^1.16.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.23.7",
"sass-loader": "^7.3.1",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"daterangepicker": "^3.0.5",
"dragscroll": "0.0.8",
"jquery-ui": "^1.12.1",
"jquery-ui-datepicker-with-i18n": "^1.10.4",
"moment": "^2.24.0"
}
}

我应该如何使用和导入jquery-ui-datepicker-with-i18n？ 我做错了什么

Answer 1

在导入语言之前，您必须导入datepicker插件本身。像这样尝试：

import 'jquery-ui/ui/widgets/autocomplete.js';
import 'jquery-ui/ui/widgets/datepicker.js';
import 'jquery-ui/themes/base/all.css';
// Add this line before the i18n language
import 'jquery-ui-datepicker-with-i18n/ui/jquery.ui.datepicker.js';
import 'jquery-ui-datepicker-with-i18n/ui/i18n/jquery.ui.datepicker-es.js';

编辑

现在我看到您直接从jquery-ui导入小部件，因此，您必须使用jquery-ui包中包含的语言文件。在不使用jquery.ui.datepicker的情况下尝试这样做：

import 'jquery-ui/ui/widgets/autocomplete.js';
import 'jquery-ui/ui/widgets/datepicker.js';
import 'jquery-ui/ui/i18n/datepicker-es.js';
import 'jquery-ui/themes/base/all.css';