webpack中的externals应该怎么使用？

Question

按照官网的描述：
防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)

我的理解就是想在组件中使用import或者require语法，但是在打包的时候不希望将依赖包进行打包。
以jquery为例，在入口html中用script标签全局引入，在组件中import $ from 'jquery',并且配置externals之后打包就不会查询依赖进行打包，而且在组件中就可以直接使用$(....)。

我的疑问是，既然全局引入了jquery我不用在组件中import $ from 'jquery'也可以直接使用$(...)啊，为什么还要去多配置一步呢？

Answer 1

这个在你说的这种情况作用是不太明显，如果你用的是模块化开发。。
比如用vue框架开发一个组件，这个组件开发完了之后要打包拿去给另一个vue项目用，这个时候组件的externals里就要加上'vue'，因为调用这个组件的vue项目里本身就有vue的依赖模块。

Answer 2

1、如果你的 jquery 在页面上引入，项目中使用 $ 引用是没有问题，但是相当于在全局 window 对象上挂载了一个对象，如果后面再引入其他库，也使用 $ 作为标识，那么你的 jquery 就被覆盖了。

2、项目中的所有依赖库，理应都放到 package.json 里，便于统一管理依赖模块，使用时通过 import 方式引入。