纱线添加完成 Jquery

Question

在新的 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"
    }
}

Answer 1

您在使用 Google Chrome 吗？如果是这样，您可能会连接到 Console Utilities API，它将 $ 视为 document.querySelector() 的别名——但前提是您还没有设置全局 $ .

您可以像这样解决这个问题：

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

第二行显式地将 $ 设置为全局 window 对象。

纱线添加完成 Jquery

Yarn add Complete Jquery

jquery

cdn

yarnpkg

webpack-encore

symfony5