纱线添加完整的Jquery答案

【问题标题】：Yarn add Complete Jquery纱线添加完整的Jquery
【发布时间】：2020-08-30 10:40:10
【问题描述】：

在一个新的 symfony 5.1 应用程序上，每当我使用 yarn add jquery 时，最常用的方法都没有定义。
我认为 yarn 正在添加我不想要的苗条版本。
我没跑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"
    }
}

【问题讨论】：

你在 requireing jquery on app.js 并重新编译资产吗？
@yivi 将 app.js 添加到帖子中。请注意，我可以检索元素，但不能使用 .addClass()。就像我在使用 jquery slim

标签： jquery cdn yarnpkg symfony5 webpack-encore

【解决方案1】：

您使用的是谷歌浏览器吗？如果是这样，您可能会挂接到Console Utilities API，它将$ 视为document.querySelector() 的别名——但前提是您还没有设置全局$。

你可以这样解决这个问题：

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

第二行明确地将$ 设置为全局窗口对象。

【讨论】：