首先要知道什么是UMD模塊規(guī)范,一般js庫為了兼容多個(gè)模塊規(guī)范都是以UMD規(guī)范導(dǎo)出的待错。
不知道UMD的可以參考這篇文章：https://www.cnblogs.com/wenbinjiang/p/11429368.html
在CDN優(yōu)化中由于我們采用直接script的方式在index.html中引入:
```
<script src="http://......"></script>
```
那么可以得知在訪問網(wǎng)站的時(shí)候默認(rèn)在沒有加載require.js的情況下规哪，我們是不包含AMD瀑构、Commonjs模塊環(huán)境中。
用element-ui cdn來舉例子 cdn地址為:https://cdn.bootcss.com/element-ui/2.12.0/index.js
直接瀏覽器打開改文件后發(fā)現(xiàn)非常亂彩倚，可以用在線js格式化:http://www.jq22.com/jsgsh
格式化后文件：
代碼非常多，但是我們只需要關(guān)心最上面function 里面的代碼，里面使用了三元運(yùn)算符在做邏輯判斷膘侮，
```
function(e, t) {
? ? "object" == typeof exports && "object" == typeof module ?? // 這里判斷是不是commonjs規(guī)范
? ? module.exports = t(require("vue")) :? // 符合
? ? "function" == typeof define && define.amd ?? // 判斷是不是符合AMD規(guī)范?
? ? define("ELEMENT", ["vue"], t) : // 符合
? ? "object" == typeof exports ?? ? // 判斷是不是符合CMD規(guī)范?
? ? exports.ELEMENT = t(require("vue")) : // 符合
? ? e.ELEMENT = t(e.Vue)? // 不在上述任何規(guī)范中，注冊全局變量 ELEMENT
}
```
webpack.config.js
```
module.exports = {
externals: {
? ? ? 'element-ui':'ELEMENT'
? ? }
}
```
到這里就大工搞成了,直接在項(xiàng)目中import ElementUI from 'element-ui' 即可
如果已經(jīng)安裝過不會加載npm安裝過的的榛，也不會打包進(jìn)生產(chǎn)環(huán)境琼了。
