À l'aide de Jquery et Bootstrap avec Es6 Importation pour Réagir App

Bonjour, je suis en train d'essayer d'inclure jquery et bootstrap dans un Reactjs projet, mais je suis en utilisant es6 importations de le faire. J'ai inclus les importations comme indiqué ci-dessous dans mon index.js fichier. Mais lors du chargement de la page, il donne une erreur en disant que Bootstrap, Javascript nécessite jquery. J'ai déjà mnp installé tous les paquets nécessaires. Comment puis-je obtenir jquery dans mes bottes et minifiés final fichier de script?

import $ from 'jquery';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';

OriginalL'auteur David Choi | 2016-10-27

  1. 17

    Trouvé la réponse sur ce site ici

    Étape 1: Installer jquery et bootstrap

    npm install jquery bootstrap --save

    Étape 2: les Importer dans le fournisseur.ts:

    import 'jquery';
import 'bootstrap/dist/js/bootstrap';

    Étape 3: Aller à wepback.common.js dans le répertoire config et ajouter à l'intérieur de cette section plugin:

    plugins:[
    .....
    ..... ,
    new webpack.ProvidePlugin({   
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
]

    Cela vous permettra de bootstrap pour trouver jquery

    Comme mentionné ici vous ne pouvez pas compter sur ES6 en respectant l'ordre de votre import états

    ty pour l'important info @David !
    Je suis entrain de créer un nouveau projet à l'aide de la CLI de création de réagir-app. Pouvez-vous dire où et comment importer? Il n'y a pas de config dans le projet créé par créer-réagir-app.
    Si vous voulez l'utiliser avec d'créez-réagir-app soit définir jquery sur la fenêtre de l'objet vous-même (comme la réponse suivante l'indique) ou npm run/yarn eject et ensuite vous trouverez webpack fichiers de configuration sous config/ où vous pouvez ajouter ces dépendances

    OriginalL'auteur David Choi

  2. 2
    window.$ = window.jQuery = require('jquery');

    Vous pouvez utiliser Gulp et webpack minifier vos fichiers

    Ne cherche pas à utiliser un autre importateur. Je suis actuellement à l'aide es6 importations, webpack, et babel pour le regroupement d'minification. Et je tiens à garder de cette façon.
    Aussi, il n'a pas de travail. Toujours la même erreur.

    OriginalL'auteur Med

  3. 2

    Essais

    import jquery from 'jquery'

window.jQuery = jquery

require('bootstrap')

    OriginalL'auteur Christian Irack

  4. 1

    Après l'importation, toutes de style css fichier, ajoutez le code ci-dessous dans votre index.js fichier

    window.jQuery = window.$ = require('jquery/dist/jquery.min.js');
require('bootstrap/dist/js/bootstrap.min.js');

    OriginalL'auteur Parth Navadiya

  5. 0

    Pour quelque raison jquery doit être défini dans minuscules trop

    import jQuery from 'jquery'
global.jQuery = jQuery
global.jquery = jQuery //jquery lowercase  was the solution
global.$ = jQuery
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'

    OriginalL'auteur Heroselohim