非常尬的場(chǎng)景

比如:

今天在開發(fā)一個(gè) vue 項(xiàng)目的時(shí)候,發(fā)現(xiàn)了一個(gè)比較蛋疼的點(diǎn).

某個(gè) dom 元素使用 refs 的方式不很好獲取.

于是就想著用 jQuery 去拿,然后執(zhí)行響應(yīng)的操作.

第一版解決方案 --- cdn 在頁面中導(dǎo)入 --- traditional (傳統(tǒng)的)

傳統(tǒng)的前端開發(fā),無非就是在頁面中導(dǎo)入一個(gè) jQuery 的 js 庫(kù).

傳統(tǒng)的老前端們３北ァ锁施！

然后在你需要使用到 jQuery 的組件內(nèi)直接使用 jQuery 即可.

<template>
  <div 420123456="app">
    <p>用 jQuery 拿到我右邊這個(gè)小哥們: <input type="text"
             420123456="abc" /> <button @click.stop="useNormalJquery">jQuery,非常傳統(tǒng)!!</button></p>
  </div>
</template>



methods: {
    // 在基于 webpack 打包的模板文件 index.html 
    // 使用常規(guī)的 cdn 的方式導(dǎo)入 jQuery.js 文件的方式.
    useNormalJquery () {
      // 由于,這里的按鈕點(diǎn)擊事件,屬于回調(diào)函數(shù).
      // 當(dāng)執(zhí)行回調(diào)函數(shù)的時(shí)候,jQuery 早就掛載到 window 對(duì)象上了.

      jQuery('#abc').val('使用 vue 了不起啊!! 我 jQuery 不一樣可以用傳統(tǒng)的方式去調(diào)用!!呵呵!')
    }
  }
  
  

結(jié)果:

很好理解的傳統(tǒng) jQuery 在 vue 中使用

因?yàn)?當(dāng)我們能夠點(diǎn)擊按鈕,并執(zhí)行事件的時(shí)候,基本已經(jīng)屬于 Event Loop 循環(huán)階段了.

前期的準(zhǔn)備工作,包括組件創(chuàng)建, 瀏覽器渲染, 外部資源下載等,早就已經(jīng)搞完了.

所以,這里只要有傳統(tǒng)的 web 開發(fā)經(jīng)驗(yàn)的人,這種做法都非常容易的去理解.

特點(diǎn):

1. 很傳統(tǒng).
2. 基本上有 web 開發(fā)經(jīng)驗(yàn)的都很容器理解.
3. webpack壓根就不知道就這么個(gè)玩意的存在.

第二版解決方案 -- 基于 webpack 打包的組件化方式 & import xxx from xxx -- modern (現(xiàn)代化)

既然是開發(fā) vue 項(xiàng)目,那么肯定優(yōu)先使用組件的方式啊!

組件的話,那我就去 npm 下載 jquery 組件咯.

npm i --save jquery

注意,這里要下載的是基于模塊化,可被 webpack 打包的 jquery 版本.

所以這里 install 的是 jquery, 而不是 jQuery .. q 小寫.

然后在需要使用的組件內(nèi)部,使用 import xxxx from 'jquery' 引入

// 導(dǎo)入基于webpack組件化打包環(huán)境的 jquery
import webpackJquery from 'jquery'

然后就像在傳統(tǒng)方式里的那樣,把 webpackJquery 當(dāng)成 jquery 使用即可.

 <p>使用 jQuery 組件的方式去拿到右邊的這個(gè)小哥們: <input type="text"
             420123456="rightText" /> <button @click.stop="useModernJquery">jQuery 組件化,非常現(xiàn)代!!!</button> </p>
             

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

結(jié)果:

組件化的 jquery 使用方式

特點(diǎn):

1. 完全是基于組件化的方式.
2. 使用模塊前必須安裝 npm i --save jquery
3. 會(huì)參與 webpack 的打包過程. (最終打包的 js 文件會(huì)變大,廢話!!!)

第三種,基于webpack-externals -- 綜合了第一種和第二種的優(yōu)點(diǎn) -- composite

首先回顧一下兩種方式:

1. 很傳統(tǒng),在頁面中導(dǎo)入 jQuery 的 cdn ,在界面里點(diǎn)擊按鈕使用 jQuery. 很傳統(tǒng),也很好理解.
2. 很現(xiàn)代, 基于組件化,使用 webpack 打包, 使用 import webpackJquery from 'jquery' 導(dǎo)入并使用.

第三種: externals 基本就屬于上述兩種方式的合成,又割舍了對(duì)方的一部分.

上面那句不是人話的解釋如下:

1. 我想用基于 webpack 打包的方式使用 jquery.
   畫外音: 使用方式仍然是在需要使用的組件內(nèi)使用 **import xxx from 'jquery'**
2. 我又不想讓 webpack 打包這個(gè)玩意.
   畫外音: 我特么不想使用 npm i --save jquery..
   畫外音2: webpack 壓根就不知道這個(gè)玩意.

是不是很崩潰???為什么會(huì)有人有這么無理取鬧的需求????

在說白點(diǎn):

jquery 我自己在頁面中使用 cdn 的方式去導(dǎo)入.
但是我的項(xiàng)目是 vue.為了保持調(diào)用的一直性,都是用模塊化的開發(fā)方式.
我希望在我的項(xiàng)目中,仍然是通過 import xxx from 'jquery'的方法來調(diào)用.雖然我是在在 index.html 中導(dǎo)入的 jquery(小聲比比)

再說就沒意思了.

webpack 里面有很多這種非常尷的配置玩意. externals就是其中一個(gè),不一而足.

接下來說一下操作方式

1. 首先,由于 webpack 壓根就不知道 jquery 的存在,也不會(huì)去打包它(減少打包后的 js 文件大小),所以,我們需要自己在 index.html 中自己是用 cdn 的方式去導(dǎo)入這個(gè)庫(kù).

需要自己在 index.html 中導(dǎo)入這個(gè)庫(kù)

2. 由于是在頁面中使用 cdn 的方式加載的 jquery 庫(kù),它不是組件,webpack壓根就不知道它的存在,更不用說打包進(jìn)去,但是我就是想使用 import xxx from 'jquery' 的方式.直接這么用是不行的. 所以,需要一個(gè)配置.

// 在 webpack.config.js 文件中

externals: {
    CaoNiDaYe: 'jQuery'
}

解釋一下這個(gè)配置:

首先查了一下單詞 externals

externals n(名詞) : n. 外控者启绰；外表（external的復(fù)數(shù)形式）

表示 外在的, 非內(nèi)置 的意思.

還有一個(gè)是 走讀生.

這個(gè)節(jié)點(diǎn)配置的意思是:

webpack 給你說一聲, 我等會(huì)在瀏覽器環(huán)境,全局的情況下提供一個(gè)叫 jQuery(window.jQuery) 的這么一個(gè)玩意.
然后,我會(huì)在你打包的組件代碼里使用 import HeheDa from 'CaoNiDaye' 方式去使用它.
你不需要關(guān)心它內(nèi)部代碼怎么寫的,具體是個(gè)什么玩意.
也千萬也別爹報(bào)錯(cuò). 它有,可以用. 你就假裝它存在就完事了.

然后在我們需要使用外部以 cdn 方式導(dǎo)入的 jQuery 的組件內(nèi),直接使用 import 的方式.

import HeheDa from 'CaoNiDaYe'


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

// cdn 導(dǎo)入 , import 使用 , webpack 配置 externals
    useExternals () {
      HeheDa('#rightText2').val('cdn先在 index.html 引入, webpack.config.js 配置一下 externals,,, 在使用 import 方式來調(diào)用..煩不煩???')
    }
    

結(jié)果:

webpack-externals 的方式

關(guān)于 externals 配置繼續(xù)說明:

externals: {
    CaoNiDaYe: 'jQuery'
  }
  

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

因?yàn)?我在 index.html 通過 cdn 導(dǎo)入的是 jQuery 庫(kù). jQuery 庫(kù)提供了一個(gè)在 window 全局環(huán)境下的 jQuery 對(duì)象.所以我這里寫的就是 jQuery.(也可以寫 $)

2. 前面那個(gè) CaoNiDaYe 是干嘛的?

配置了 externals, 就是為了可以使用 import 的方式來使用. CaoNiDaYe 就是 import 需要指定的組件化名字.有點(diǎn)類似我們自己寫的一個(gè) export default 的 js 庫(kù)文件名.

3. 大多數(shù)博客里,都是這么配置

externals: {
    jQuery: 'jQuery'
  }

但是我就不,我就要配置一個(gè) CaoNiDaYe 來更好的讓自己理解,這個(gè) key/value 所表述的意思.

特點(diǎn):

1. 需要的庫(kù)文件需要你自己在 index.html 中導(dǎo)入.
2. 不參與 webpack 的打包.
3. 但是告知 webpack 這個(gè)庫(kù)的存在.可以使用 import 組件化的方式在項(xiàng)目?jī)?nèi)部使用.

碼云地址