web颜值要爆表WebWeb前端之路

import 'bootstrap' 可以吗!,

2017-04-11  本文已影响746人  sky_rainbow

首先你是要引用bootstrap,肯定是用它的css部分,也可能连它的js部分也想用;

但是你别以为用 import 'bootstrap' 就可以了;
如果你这么用 马上报错  jQuery is not defined

解答原因:
1、直接 import 'bootstrap'  进来的只有 bootstrap的js部分,这里肯定没有css。
2、bootstrap的js部分需要 jquery的支持(他的transition.js文件会先报这个错,你可以打开node_modules/bootstrap/js/transion.js文件看一下)

上面我已经给出了为什么报这个错误的原因,下面我会对具体原因进行解答
1、为什么没有bootstrap 的css部分,而只是js部分

1、我们很习惯用 import  'jquery' 、import 'react' 等等框架和插件;但是它们引进来的都是js,而bootstrap也是直接引进来的只有js部分;因为CommonJS AMD操作的是js。可不能操作纯css部分,所以你只能找到js部分。(这里虽然没有用require引入但是直接用import 某插件  import会全局查找符合的条件的插件)
哪会有有人问我们这么能引入css部分呢,很简单;(根据你的目录层级直接找到node_modules中显示的引用即可以了,最后打包时也只是把该部分给打包进来了,如果觉得不好看,在全局配置一下,将路径映射替换一下)
import  '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'
import很类似node.js文件操作模块fs的功能;静态的引入某目录下的文件;
但是我告诉你这么引入还会报错:某些文件找不到。其实是bootstrap中引入的字体找不到;
所以你有两种办法:1、删除bootstrap源码中的字体引入的部分;2、把字体这部分也给引入进来;

2、怎么解决这个问题呢(如果你需要bootstrap的js部分)

bootstrap不是需要jQuery,我们给它就可以,怎么给
唯一的方法(不包括在打包框架中的全局配置jQuery)
var $ = window.jQuery = require("jquery") 
require("bootstrap")
这个错误就解决了。你要引入css部分还是上面那个方法

为什么是唯一的;
如果你先这么写,哪错了
import jQuery from "jquery"
window.jQuery = $
import 'bootstrap'
因为require和import 在引入文件时一个是动态化的一个是静态引入
import 静态引入会导致 不能像require一样直接将jquery赋值到window上
并且import会变量提升将上面那个例子变成
import jQuery from "jquery"
import 'bootstrap'
window.jQuery = $

按加载顺序bootstrap不能还是没有拿到全局的jQuery

上一篇下一篇

猜你喜欢

热点阅读