webpack中关于import的问题

Question

比如我有一个vue项目，main.js是入口文件，那么如果我在main.js中

import 'bootstrap' 

（jquery是配置好了的，不要担心jquery）
然后我在其它组件中按照bootstrap的特效例如轮播什么的组件的html结构来写，发现是可以生效的。

这说明bootstrap中的js可以在所有的组件中生效的。

然后我就有点懵逼了。

为什么在main.js中import了的js在整个项目中都可以起作用？这一句代码做了什么？

这样子把整个js文件直接import进来会发生什么？

import 'bootstrap' 
import bootstrap from 'bootstrap' 

上面那两句有什么不一样？（其实我就是想知道import xxx和import xx from xxx有什么不一样，它们都做了什么）

如果我直接在main.js中import $ from 'jquery'会不会也可以在全局中使用jquery？（应该是不行的，呵呵，因为平常我们那样引入一个组件，就只能在那里使用）

求解答啊求解答

Answer 1

• ES6的import语法暂时不被nodejs支持，所以此处import都是由Webpack实现的

• 直接引入import xxx.js或者import xxx.css会像添加<script>和<link>标签一样注入到全局中去，所以是全局可用的

• import xxx和import xx from xxx为ES6的模块导入语法，区别参见MDN

  • import xxx直接导入整个模块，而import xx from xxx导入默认导出项，并给默认导出项一个具体名字

• import 'jquery'或者import $ from 'jquery'不能直接在Vue全局使用，是因为组件模块化，import进去的模块，只能在写了import的那个文件里可用

• 而import 'bootstrap'直接引入是可用的，这是因为jquery和bootstrap的引入的内容不同：

  • jquery引入的东西，是通过export导出的类，也就是说，其实引入的是一个叫jQuery或者简写成$的类

  • 而bootstrap，引入的东西，是CSS样式文件和JS代码文件，没有导出任何模块。在Vue项目里，直接import xxx.css和直接import xxx.js可以起到和一般网页中<link href="xxx.css">或<script src="xxx.js">标签相同的效果，而且这样导进去的CSS和JS是全局的，也就是说，对于bootstrap，导入的东西不是模块通过export（module.exports）暴露出来的数据，而是一整个CSS和JS文件，所以它是全局可用的