twitter-bootstrap 将 Jquery 和 Bootstrap 与 Es6 导入一起用于 React 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40288268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Jquery and Bootstrap with Es6 Import for React App
提问by David Choi
Hello I am trying to include jquery and bootstrap into a Reactjs project, but I am using es6 imports to do so. I've included the imports as shown below in my index.js file. But upon page load it gives error saying that Bootstrap's Javascript requires jquery. I've already npm installed all the required packages. How can I get jquery into my bundled and minified final script file?
您好，我正在尝试将 jquery 和 bootstrap 包含到 Reactjs 项目中，但我正在使用 es6 导入来执行此操作。我已经在我的 index.js 文件中包含了如下所示的导入。但是在页面加载时，它给出了错误，说 Bootstrap 的 Javascript 需要 jquery。我已经 npm 安装了所有必需的包。如何将 jquery 放入我的捆绑和缩小的最终脚本文件中？
import $ from 'jquery';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';
回答by David Choi
Found the answer on this site here
在这里找到了这个网站上的答案
Step 1:Install both jquery and bootstrap
第一步：安装jquery和bootstrap
npm install jquery bootstrap --save
Step 2:Import them in vendor.ts:
第 2 步：在 vendor.ts 中导入它们：
import 'jquery';
import 'bootstrap/dist/js/bootstrap';
Step 3:Go to wepback.common.js in config directory and add this inside plugin section:
第 3 步：转到 config 目录中的 wepback.common.js 并将其添加到插件部分：
plugins:[
.....
..... ,
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
]
This will let bootstrap to find jquery
这将让引导程序找到 jquery
As mentioned hereyou can not depend on ES6 respecting the order of your importstatements
回答by Med
window.$ = window.jQuery = require('jquery');
You can use Gulp and webpackto minify your files
你可以使用Gulp 和 webpack来缩小你的文件
回答by Christian Irack
Testing with this
用这个测试
import jquery from 'jquery'
window.jQuery = jquery
require('bootstrap')
回答by Heroselohim
For some reason jquery needs to be defined in lowercasetoo
对于在定义某种原因jQuery的需求小写太
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'
回答by Parth Navadiya
After import all style css file add the below code in your index.js file
导入所有样式 css 文件后，在 index.js 文件中添加以下代码
window.jQuery = window.$ = require('jquery/dist/jquery.min.js');
require('bootstrap/dist/js/bootstrap.min.js');
