web-dev-qa-db-fra.com

Utilisation de Jquery et Bootstrap avec Es6 Import pour React App

Bonjour, j'essaie d'inclure jquery et bootstrap dans un projet Reactjs, mais j'utilise des importations es6 pour le faire. J'ai inclus les importations comme indiqué ci-dessous dans mon fichier index.js. Mais lors du chargement de la page, une erreur est générée en indiquant que le code Javascript de Bootstrap nécessite jquery. J'ai déjà installé npm tous les paquets requis. Comment puis-je insérer jQuery dans mon fichier de script final groupé et minifié?

import $ from 'jquery';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';
jquerytwitter-bootstrapreactjsecmascript-6
5
David Choi

Trouvez la réponse sur ce site ici

Étape 1: Installez jquery et bootstrap

npm install jquery bootstrap --save

Étape 2: Importez-les dans vendor.ts:

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

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

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

Cela permettra à bootstrap de trouver jquery

Comme mentionné ici vous ne pouvez pas compter sur ES6 pour respecter l’ordre de vos déclarations import

17
David Choi
window.$ = window.jQuery = require('jquery');

Vous pouvez utiliser Gulp and webpack pour réduire vos fichiers 

2
Med

Tester avec cette

import jquery from 'jquery'

window.jQuery = jquery

require('bootstrap')
2
Christian Irack

Après avoir importé tous les fichiers css de style, ajoutez le code ci-dessous dans votre fichier index.js

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

Pour une raison quelconque, jquery doit être défini en minuscule aussi

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'
0
Heroselohim