纱线添加完整的jQuery

问题描述

在新的symfony 5.1应用程序上，每当我使用yarn add jquery时，都不会定义最常见的方法。
我认为毛线正在添加不是我想要的纤细版本。
我没有运行yarn add jquery-slim

例如.ajax()，.addClass()，.css()不可用。
当我从CDN使用它时，它可以正常工作。

我在做什么错了？

这是一些控制台输出。我能够检索该元素，但不能使用.addClass方法。

这是我的App.js

/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.scss in this case)
import '../css/app.scss';

require('bootstrap');

// Need jQuery? Install it with "yarn add jquery",then uncomment to import it.
import $ from 'jquery';

console.log('Webpack Loaded');

我的package.json如下：

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0","core-js": "^3.0.0","node-sass": "^4.14.1","regenerator-runtime": "^0.13.2","sass-loader": "^8.0.0","webpack-notifier": "^1.6.0"
    },"license": "UNLICENSED","private": true,"scripts": {
        "dev-server": "encore dev-server","dev": "encore dev","watch": "encore dev --watch","build": "encore production --progress"
    },"dependencies": {
        "bootstrap": "^4.5.2","copy-webpack-plugin": "^6.0.4","jquery": "3.5.1","popper.js": "^1.16.1"
    }
}

解决方法

您是否正在使用Google Chrome？如果是这样，您可能会迷上Console Utilities API，它将$视为document.querySelector()的别名-但前提是您尚未设置全局$

您可以按照以下方式解决此问题：

import $ from "jquery";
window.$ = $;

第二行将$显式设置为全局窗口对象。