webpack externals CDN优化如何查找的导出变量名

首先要知道什么是UMD模块规范,一般js库为了兼容多个模块规范都是以UMD规范导出的。

不知道UMD的可以参考这篇文章：https://www.cnblogs.com/wenbinjiang/p/11429368.html

在CDN优化中由于我们采用直接script的方式在index.html中引入:

```

```

那么可以得知在访问网站的时候默认在没有加载require.js的情况下，我们是不包含AMD、Commonjs模块环境中。

用element-ui cdn来举例子 cdn地址为:https://cdn.bootcss.com/element-ui/2.12.0/index.js

直接浏览器打开改文件后发现非常乱，可以用在线js格式化:http://www.jq22.com/jsgsh

格式化后文件：


代码非常多，但是我们只需要关心最上面function 里面的代码，里面使用了三元运算符在做逻辑判断，

```

function(e, t) {

    "object" == typeof exports && "object" == typeof module ?  // 这里判断是不是commonjs规范

    module.exports = t(require("vue")) :  // 符合

    "function" == typeof define && define.amd ?  // 判断是不是符合AMD规范 

    define("ELEMENT", ["vue"], t) : // 符合

    "object" == typeof exports ?    // 判断是不是符合CMD规范 

    exports.ELEMENT = t(require("vue")) : // 符合

    e.ELEMENT = t(e.Vue)  // 不在上述任何规范中，注册全局变量 ELEMENT

}

```

webpack.config.js

```

module.exports = {

externals: {

      'element-ui':'ELEMENT'

    }

}

```

到这里就大工搞成了,直接在项目中import ElementUI from 'element-ui' 即可

如果已经安装过不会加载npm安装过的，也不会打包进生产环境。