javascript - 如何通过 npm jquery-ui-datepicker-with-i18n 导入 laravel?
问题描述
我是使用 npm 的新手,我已经在我的项目中安装了包 jquery-ui-datepicker-with-i18n,当我将它导入我的项目时它说Uncaught ReferenceError: jQuery is not defined
但我已经安装了 jquery。
这是我的 bootstrap.js:
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
window.jQueryUI = require('jquery-ui');
require('bootstrap');
} catch (e) {}
这是我的 app.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']);
包.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?我做错了什么
解决方案
在导入语言之前,您必须先导入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
,因此,您必须使用 package.json 中包含的语言文件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';
推荐阅读
- javascript - 运行命令时如何等待响应?
- regex - 正则表达式不忽略匹配
- javascript - 使用 Vue.js 路由器的服务工作者范围
- sql - 每条记录的单个数据点
- python - 如何在python中加载图像序列?
- javascript - 我正在尝试使用我自己的不和谐机器人制作反应角色,但由于某种原因,即使它添加了反应,它也不会添加角色
- javascript - 节点 lambda 可以使用 AWSJavaScriptSDK/v3 GetObjectCommand 调用文件内容的次数是否有限制?
- javascript - 在 React.js 中实现 JS 库
- wordpress - 在 JSFiddle 中工作而不是在浏览器中,'$ 不是函数
- kubernetes - 有没有办法在不从持久卷备份的情况下恢复 neo4j 3.5 数据库?