首先你是要引用bootstrap,肯定是用它的css部分湿蛔,也可能連它的js部分也想用;
但是你別以為用 import 'bootstrap' 就可以了县爬;
如果你這么用 馬上報(bào)錯(cuò)? jQuery is not defined
解答原因:
1阳啥、直接 import 'bootstrap'? 進(jìn)來(lái)的只有 bootstrap的js部分,這里肯定沒(méi)有css财喳。
2察迟、bootstrap的js部分需要 jquery的支持(他的transition.js文件會(huì)先報(bào)這個(gè)錯(cuò),你可以打開(kāi)node_modules/bootstrap/js/transion.js文件看一下)
上面我已經(jīng)給出了為什么報(bào)這個(gè)錯(cuò)誤的原因耳高,下面我會(huì)對(duì)具體原因進(jìn)行解答
1扎瓶、為什么沒(méi)有bootstrap 的css部分,而只是js部分
1泌枪、我們很習(xí)慣用 import? 'jquery' 概荷、import 'react' 等等框架和插件;但是它們引進(jìn)來(lái)的都是js碌燕,而bootstrap也是直接引進(jìn)來(lái)的只有js部分误证;因?yàn)镃ommonJS AMD操作的是js⌒藓荆可不能操作純css部分愈捅,所以你只能找到j(luò)s部分。(這里雖然沒(méi)有用require引入但是直接用import 某插件? import會(huì)全局查找符合的條件的插件)
哪會(huì)有有人問(wèn)我們這么能引入css部分呢慈鸠,很簡(jiǎn)單蓝谨;(根據(jù)你的目錄層級(jí)直接找到node_modules中顯示的引用即可以了,最后打包時(shí)也只是把該部分給打包進(jìn)來(lái)了,如果覺(jué)得不好看譬巫,在全局配置一下咖楣,將路徑映射替換一下)
import? '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import很類似node.js文件操作模塊fs的功能;靜態(tài)的引入某目錄下的文件缕题;
但是我告訴你這么引入還會(huì)報(bào)錯(cuò):某些文件找不到截歉。其實(shí)是bootstrap中引入的字體找不到;
所以你有兩種辦法:1烟零、刪除bootstrap源碼中的字體引入的部分瘪松;2、把字體這部分也給引入進(jìn)來(lái)锨阿;
2宵睦、怎么解決這個(gè)問(wèn)題呢(如果你需要bootstrap的js部分)
bootstrap不是需要jQuery,我們給它就可以墅诡,怎么給
唯一的方法(不包括在打包框架中的全局配置jQuery)
var $ = window.jQuery = require("jquery")?
require("bootstrap")
這個(gè)錯(cuò)誤就解決了壳嚎。你要引入css部分還是上面那個(gè)方法
為什么是唯一的;
如果你先這么寫末早,哪錯(cuò)了
import jQuery from "jquery"
window.jQuery = $
import 'bootstrap'
因?yàn)閞equire和import 在引入文件時(shí)一個(gè)是動(dòng)態(tài)化的一個(gè)是靜態(tài)引入
import 靜態(tài)引入會(huì)導(dǎo)致 不能像require一樣直接將jquery賦值到window上
并且import會(huì)變量提升將上面那個(gè)例子變成
import jQuery from "jquery"
import 'bootstrap'
window.jQuery = $按加載順序bootstrap不能還是沒(méi)有拿到全局的jQuery