webpack中library和libraryTarget详解
默认 webpack 导出都是这样的结构,一个自执行函数的形式。
(() => {return {name: 'jack',age: 24,};
})();
没有赋值操作,所以其他文件没法引用该对象。加了 library 和 libraryTarget 之后的 webpack 配置:
output: {...library: 'finalModule',libraryTarget: 'var',
},
var finalModule = (() => {return {name: 'jack',age: 24,};
})();
特点:有赋值操作,赋值给 library 定义的变量。所以 libraryTarget: 'var' 的含义就是作为全局变量,具体变量的名字叫什么是通过 library 来定义的。
libraryTarget: 'assign' 的 webpack 配置:
output: {...library: 'finalModule',libraryTarget: 'assign',
},
finalModule = (() => {return {name: 'jack',age: 24,};
})();
特点:赋值给全局变量, 可能会覆盖宿主环境下同名的变量名,因为我们看到变量是直接使用的,并没有通过 var 去声明,和第一种还是有区别。
libraryTarget: 'this' 的 webpack 配置:
output: {...library: 'finalModule',libraryTarget: 'this',
},
this.finalModule = (() => {return {name: 'jack',age: 24,};
})();
通过对象属性暴露,这里是 this 对象,属性是通过 library 来定义的。
当然我们也可以挂在到 window 对象上。
output: {...library: 'finalModule',libraryTarget: 'window',
},
window.finalModule = (() => {return {name: 'jack',age: 24,};
})();
当然我们也可以挂在到 global 对象上。
output: {...library: 'finalModule',libraryTarget: 'global',
},
global.finalModule = (() => {return {name: 'jack',age: 24,};
})();
我们还可以定义在导出的对象上,方便其他库导入进来使用。
output: {...library: 'finalModule',libraryTarget: 'commonjs',
},
exports.finalModule = (() => {return {name: 'jack',age: 24,};
})();
还有默认导出,使用 libraryTarget 为 commonjs2 这个属性。此时 library 配置的字段会失效。所以我们可以省略。
output: {...libraryTarget: 'commonjs',
},
module.exports = (() => {return {name: 'jack',age: 24}
})());
这是 commonJS 规范,还有 amd 规范的形式。
output: {...library: 'finalModule',libraryTarget: 'amd',
},
define('finalModule', [], () => {return (() => {return {name: 'jack',age: 24,};})();
});
太多了!!!
webpack中library和libraryTarget详解相关推荐
- webpack打包后引用cdn的js_利用CDN加速react webpack打包后的文件详解
此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置) ...
- 【JavaScript 教程】ES6 中的 Promise对象 详解
[JavaScript 教程]ES6 中的 Promise对象 详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
- html5代码转换为视频,HTML5中的视频代码详解
摘要 腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
- VMware虚拟机文件夹中各文件作用详解
VMware虚拟机文件夹中各文件作用详解 虚拟机的文件管理由VMware Workstation来执行. 一个虚拟机一般以一系列文件的形式储存在宿主机中, 这些文件一般在由workstation为虚拟 ...
- C++中substr()函数用法详解
C++中substr()函数用法详解 原型: string substr (size_t pos = 0, size_t len = npos) const; 返回一个新构造的string对象,其值初 ...
- php中 继承中的概念,JavaScript_JavaScript中的继承方式详解,js继承的概念
js里常用的如下 - phpStudy...
JavaScript中的继承方式详解 js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于 ...
- Java中的static关键字详解
** Java中的static关键字详解 ** 在一个类中定义一个方法为static,即静态的,那就是说无需本类的对象就可以调用此方法.调用一个静态方法就是 "类名.方法名" ,静 ...
- java多线程中的join方法详解
java多线程中的join方法详解 方法Join是干啥用的? 简单回答,同步,如何同步? 怎么实现的? 下面将逐个回答. 自从接触Java多线程,一直对Join理解不了.JDK是这样说的:join p ...
- java中匿名内部类详解_java 中匿名内部类的实例详解
搜索热词 java 中匿名内部类的实例详解 原来的面貌: class TT extends Test{ void show() { System.out.println(s+"~~~哈哈&q ...
最新文章
- Django博客系统(短信验证码)
- Nature: 拟南芥微生物组功能研究1培养组学—高通量细菌分离培养鉴定
- 多线程处理器 适用于 已知要处理任务的个数,进行多线程处理
- 【floyd存字典序路径】【HDU1385】【Minimum Transport Cost】
- .net core 使用redis 基于 StackExchange.Redis
- oracle distinct分页优化_Oracle SQL性能优化最常用的40条建议
- IDEA——必备插件指南
- 同为EA888发动机,迈腾和奥迪A4L,为何差价10万多?
- Sparrow - Distributed, Low Latency Scheduling
- 100个MySQL 的调节和优化的提示
- 智能指针和自定义删除器
- extern 关键字详解
- 黑马程序员_常见的几个运行时异常
- 根据CTP接口计算现手、增仓、开平、对手盘 (1)
- 2020计算机考研英语国家线,2020考研英语国家分数线?
- Fibo Rule规则引擎可视化
- python中len函数_len()函数以及Python中的示例
- mysql 实现异地同步_MySQL 异地同步问题
- 商品货架管理(愿疫情早日消散,大家去见想见的人)
- 图片上传系统在淘系中的实践
热门文章
- 独家对话华为王成录:手机 HarmonyOS 开发者 Beta 版将如约而至
- WebAssembly 将成为互联网的终结?
- 天猫京东618下单金额近万亿;苹果或选择印度组装新款iPhone SE;Adobe将于12月31日终止支持Flash| 极客头条...
- Java 13 新特性全面解读
- 你的早鸟票特权仅剩2天!百度、快手、商汤、图森等重磅嘉宾确认出席AI ProCon 2019...
- 百度回应“抄袭天猫精灵”;ofo 押金退完需 12 年;VS Code 1.36 发布 | 极客头条...
- 手把手带你走进卷积神经网络!
- 2 万字全面测评深度学习框架 PaddlePaddle、TensorFlow 和 Keras | 程序员硬核评测
- 一封遗失信件成就的科技亿万富翁
- 直接拿来用!GitHub 上那些值得你 Star 的开源项目!