問(wèn)題描述

比如我的庫(kù)文件vue，vuex 這些都是通過(guò)cdn 使用script加載到html，那我在打包的時(shí)候 就不會(huì)去打包庫(kù)文件，而是使用我的script的資源。那我源碼里面就不能使用require(’vue’) 這種代碼。這個(gè)應(yīng)該如何解決

問(wèn)題解答

首先，你需要確定一下你打包出來(lái)的bundle文件支持的模塊規(guī)范。我自己比較喜歡umd，所以我自己打包出來(lái)的bundle文件都是umd的。也就是說(shuō)它支持commjs和amd以及global的模塊形式。很慶幸，vue發(fā)布的包也是umd的，也就是說(shuō)和webpack打包出來(lái)的bundle是一樣的。

其次，umd是怎樣引用模塊的？當(dāng)你不使用requirejs這樣模塊引擎時(shí)，會(huì)直接通過(guò)script標(biāo)簽引入模塊文件。例如你同時(shí)引入了多個(gè)webpack打包后的bundle文件，在這些文件之間，其實(shí)它們是通過(guò)global模式相互引用，實(shí)際上也就是在window上掛了一個(gè)對(duì)象，在第二個(gè)bundle文件里直接使用window上掛的這個(gè)對(duì)象作為全局變量即可。上面說(shuō)vue是遵循umd的，所以在你通過(guò)兩個(gè)script標(biāo)簽引入vue和你自己的bundle文件的時(shí)候，可以通過(guò)window.Vue來(lái)引用vue。

再次，你的bundle中應(yīng)該怎么引用由script標(biāo)簽引入的vue呢？就是要使用上面網(wǎng)友的externals。你需要構(gòu)建一個(gè)externals規(guī)則來(lái)引用到這個(gè)vue，externals的使用方法可以看webpack官網(wǎng)，但是官網(wǎng)的解釋太簡(jiǎn)單了，我根據(jù)官網(wǎng)的例子，寫(xiě)了一篇關(guān)于externals的博客進(jìn)行詳解，有興趣可以讀下。在你的case里面，externals應(yīng)該包含：

{ externals: [{ vue: ’Vue’, jquery: ’jQuery’, ...}... ]}

上面是webpack配置中的一部分，在你的源碼里面這樣使用：

import vue from ’vue’

這樣即可，在打包出來(lái)的bundle文件內(nèi)，你就可以看到在global模式下，會(huì)把Vue這個(gè)全局變量賦值過(guò)來(lái)。

把vue vuex這些抽取出來(lái)；

entry: { ’vue’: [’vue,’’vuex’] },

plugins里寫(xiě):

const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;new CommonsChunkPlugin({ name: [’vue’], filename: ’文件夾名/[name].js’}),

這樣不管你是否require(’vue’)，都會(huì)把vue和vuex等等生成一個(gè)單獨(dú)的 文件夾名/vue.js并且這個(gè)vue.js包含的內(nèi)容你的其他webpack入口js文件都不會(huì)把它打包進(jìn)去

使用 externals，照樣用 require