webpack4 怎么集成jquery

Posted 2023-03-23

安装jquery,安装到当前项目下

npm install jquery --save --save-exact

在main.js中引入并且使用jquery

打开webpack项目下的main.js，添加一下内容

import \'jquery/dist/jquery.min.js\'

这样就在整个项目（全局）下添加了jquery，每个组件都可以使用jQuery了

参考技术A 考虑使用 shim alias 配置 参考技术B 直接使用Npm安装即可。

webpack 安可和 jquery ui (dateRangeSlider)

【中文标题】webpack 安可和 jquery ui (dateRangeSlider)

【英文标题】：webpack encore and jquery ui (dateRangeSlider)

【发布时间】：2019-06-15 02:27:24

【问题描述】：

我在使用 Webpack Encore 将 jquery-ui 插件与我的 Symfony 应用程序集成时遇到问题。可以在控制台看到错误（TypeError: t(...).dateRangeSlider is not a function[Learn More]）：

https://date-range-demo.herokuapp.com/en/blog/search

源代码位于https://github.com/tacman/range-slider-demo，它只是搜索页面上带有日期范围滑块的 symfony 演示，通过以下更改：

从命令行将库添加到 package.json

纱线添加 jquery-ui jqrangeslider

添加到 /blog/search.html

    <div id="slider">Slider Placeholder</div>

添加到 assets/js/search.js

import 'jquery-ui'; 
import 'jqrangeslider';

$('#slider').dateRangeSlider();

资产是使用 'yarn run encore dev' 构建的，我确信这是一个简单的配置错误，但我无法弄清楚它是什么。

部署到 heroku 增加了一些东西，但与插件不加载无关。要在本地查看此错误，只需克隆 repo，运行 composer install && yarn install && yarn run encore dev，然后启动服务器并转到 /en/blog/search。

感谢您对此的任何帮助！

【问题讨论】：

不要使用 jquery-ui，而是使用 webpack-jquery-ui ： yarn add webpack-jquery-ui （最终使用 --dev 选项）。然后在 search.js 中使用 require('webpack-jquery-ui') 将其导入。这是我找到的唯一解决方案，但我无法解释为什么没有它就无法工作。

【参考方案1】：

在寻找解决方案数小时后，我已经通过导入特定文件完成了这项工作： 首先我安装了jquery-ui

npm i jquery-ui --dev

然后在我的 js 文件中，我导入了以下文件（拖放）：

require('jquery-ui/ui/widgets/droppable');
require('jquery-ui/ui/widgets/sortable');
require('jquery-ui/ui/widgets/selectable');
import $ from 'jquery';

【参考方案2】：

我遇到了问题，但是 jqueryui 的可拖动组件。

在我的应用程序中，我使用 require 而不是 import，但我必须特别要求可拖动组件，而不是整个 jquery-ui 的东西。

我现在没有合适的复制粘贴示例，但请尝试导入 draggable.js 文件。