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

Posted 2023-03-14

【中文标题】如何通过 npm jquery-ui-datepicker-with-i18n 导入 laravel？

【英文标题】：How to import in to laravel via npm jquery-ui-datepicker-with-i18n?

【发布时间】：2020-04-07 01:12:08

【问题描述】：

我是使用 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？我做错了什么

【参考方案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';

【讨论】：

感谢它的工作，所以 jquery-ui 已经安装了所有东西，甚至 i18n？所以安装包“jquery-ui-datepicker-with-i18n”没用吧？

@Cristian 是的，jquery-ui 里面有一切。我认为他们有jquery-ui-datepicker-with-i18n 用于以其他方式导入jquery-ui 并且只想附加小部件的情况，但这也没有多大意义。