問題描述

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

問題解答

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

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

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

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

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

import vue from ’vue’

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

把vue vuex這些抽取出來；

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

plugins里寫:

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

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

使用 externals，照樣用 require