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

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

不知道UMD的可以参考这篇文章：www.cnblogs.com/wenbinjiang…

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

<script src="http://......"></script>

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

用element-ui cdn来举例子 cdn地址为:cdn.bootcss.com/element-ui/…

直接浏览器打开改文件后发现非常乱，可以用在线js格式化: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安装过的，也不会打包进生产环境。

转载注明出处：juejin.cn/post/684490…