webpack 学习笔记之十二 -- externals

非常尬的场景

比如:

今天在开发一个 vue 项目的时候,发现了一个比较蛋疼的点.

某个 dom 元素使用 refs 的方式不很好获取.

于是就想着用 jQuery 去拿,然后执行响应的操作.

---

第一版解决方案 --- cdn 在页面中导入 --- traditional (传统的)

传统的前端开发,无非就是在页面中导入一个 jQuery 的 js 库.

传统的老前端们！！

然后在你需要使用到 jQuery 的组件内直接使用 jQuery 即可.

<template>
  <div 420123456="app">
    <p>用 jQuery 拿到我右边这个小哥们: <input type="text"
             420123456="abc" /> <button @click.stop="useNormalJquery">jQuery,非常传统!!</button></p>
  </div>
</template>



methods: {
    // 在基于 webpack 打包的模板文件 index.html 
    // 使用常规的 cdn 的方式导入 jQuery.js 文件的方式.
    useNormalJquery () {
      // 由于,这里的按钮点击事件,属于回调函数.
      // 当执行回调函数的时候,jQuery 早就挂载到 window 对象上了.

      jQuery('#abc').val('使用 vue 了不起啊!! 我 jQuery 不一样可以用传统的方式去调用!!呵呵!')
    }
  }
  
  

结果:

很好理解的传统 jQuery 在 vue 中使用

因为,当我们能够点击按钮,并执行事件的时候,基本已经属于 Event Loop 循环阶段了.

前期的准备工作,包括组件创建, 浏览器渲染, 外部资源下载等,早就已经搞完了.

所以,这里只要有传统的 web 开发经验的人,这种做法都非常容易的去理解.

特点:

1. 很传统.
2. 基本上有 web 开发经验的都很容器理解.
3. webpack压根就不知道就这么个玩意的存在.

---

第二版解决方案 -- 基于 webpack 打包的组件化方式 & import xxx from xxx -- modern (现代化)

既然是开发 vue 项目,那么肯定优先使用组件的方式啊!

组件的话,那我就去 npm 下载 jquery 组件咯.

npm i --save jquery

注意,这里要下载的是基于模块化,可被 webpack 打包的 jquery 版本.

所以这里 install 的是 jquery, 而不是 jQuery .. q 小写.

然后在需要使用的组件内部,使用 import xxxx from 'jquery' 引入

// 导入基于webpack组件化打包环境的 jquery
import webpackJquery from 'jquery'

然后就像在传统方式里的那样,把 webpackJquery 当成 jquery 使用即可.

 <p>使用 jQuery 组件的方式去拿到右边的这个小哥们: <input type="text"
             420123456="rightText" /> <button @click.stop="useModernJquery">jQuery 组件化,非常现代!!!</button> </p>
             

methods: {
    // 使用 组件化的方式去使用 jQuery.  first -> npm install --save jQuery
useModernJquery () {
      webpackJquery('#rightText').val('npm i --save jquery ---> 使用组件化的模式使用 jQuery 就是这么厉害!!不服啊!!')
    }
  }

结果:

组件化的 jquery 使用方式

特点:

1. 完全是基于组件化的方式.
2. 使用模块前必须安装 npm i --save jquery
3. 会参与 webpack 的打包过程. (最终打包的 js 文件会变大,废话!!!)

---

第三种,基于webpack-externals -- 综合了第一种和第二种的优点 -- composite

首先回顾一下两种方式:

1. 很传统,在页面中导入 jQuery 的 cdn ,在界面里点击按钮使用 jQuery. 很传统,也很好理解.
2. 很现代, 基于组件化,使用 webpack 打包, 使用 import webpackJquery from 'jquery' 导入并使用.

第三种: externals 基本就属于上述两种方式的合成,又割舍了对方的一部分.

上面那句不是人话的解释如下:

1. 我想用基于 webpack 打包的方式使用 jquery.
   画外音: 使用方式仍然是在需要使用的组件内使用 **import xxx from 'jquery'**
2. 我又不想让 webpack 打包这个玩意.
   画外音: 我特么不想使用 npm i --save jquery..
   画外音2: webpack 压根就不知道这个玩意.

是不是很崩溃???为什么会有人有这么无理取闹的需求????

在说白点:

jquery 我自己在页面中使用 cdn 的方式去导入.
但是我的项目是 vue.为了保持调用的一直性,都是用模块化的开发方式.
我希望在我的项目中,仍然是通过 import xxx from 'jquery'的方法来调用.虽然我是在在 index.html 中导入的 jquery(小声比比)

再说就没意思了.

webpack 里面有很多这种非常尴的配置玩意. externals就是其中一个,不一而足.

接下来说一下操作方式

1. 首先,由于 webpack 压根就不知道 jquery 的存在,也不会去打包它(减少打包后的 js 文件大小),所以,我们需要自己在 index.html 中自己是用 cdn 的方式去导入这个库.

需要自己在 index.html 中导入这个库

2. 由于是在页面中使用 cdn 的方式加载的 jquery 库,它不是组件,webpack压根就不知道它的存在,更不用说打包进去,但是我就是想使用 import xxx from 'jquery' 的方式.直接这么用是不行的. 所以,需要一个配置.

// 在 webpack.config.js 文件中

externals: {
    CaoNiDaYe: 'jQuery'
}

解释一下这个配置:

首先查了一下单词 externals

externals n(名词) : n. 外控者；外表（external的复数形式）

表示 外在的, 非内置 的意思.

还有一个是 走读生.

这个节点配置的意思是:

webpack 给你说一声, 我等会在浏览器环境,全局的情况下提供一个叫 jQuery(window.jQuery) 的这么一个玩意.
然后,我会在你打包的组件代码里使用 import HeheDa from 'CaoNiDaye' 方式去使用它.
你不需要关心它内部代码怎么写的,具体是个什么玩意.
也千万也别爹报错. 它有,可以用. 你就假装它存在就完事了.

然后在我们需要使用外部以 cdn 方式导入的 jQuery 的组件内,直接使用 import 的方式.

import HeheDa from 'CaoNiDaYe'


  <p>webpack & externals & import & cdn <input type="text"
             420123456="rightText2" /> <button @click.stop="useExternals">夹生,,尬的一批的 externals 方式...</button> </p>
             
             

// cdn 导入 , import 使用 , webpack 配置 externals
    useExternals () {
      HeheDa('#rightText2').val('cdn先在 index.html 引入, webpack.config.js 配置一下 externals,,, 在使用 import 方式来调用..烦不烦???')
    }
    

结果:

webpack-externals 的方式

关于 externals 配置继续说明:

externals: {
    CaoNiDaYe: 'jQuery'
  }
  

1. 在 value 的地方,我为什么要写 jQuery,而不是 FuckThisShit?

因为,我在 index.html 通过 cdn 导入的是 jQuery 库. jQuery 库提供了一个在 window 全局环境下的 jQuery 对象.所以我这里写的就是 jQuery.(也可以写 $)

2. 前面那个 CaoNiDaYe 是干嘛的?

配置了 externals, 就是为了可以使用 import 的方式来使用. CaoNiDaYe 就是 import 需要指定的组件化名字.有点类似我们自己写的一个 export default 的 js 库文件名.

3. 大多数博客里,都是这么配置

externals: {
    jQuery: 'jQuery'
  }

但是我就不,我就要配置一个 CaoNiDaYe 来更好的让自己理解,这个 key/value 所表述的意思.

特点:

1. 需要的库文件需要你自己在 index.html 中导入.
2. 不参与 webpack 的打包.
3. 但是告知 webpack 这个库的存在.可以使用 import 组件化的方式在项目内部使用.

码云地址