29.webpack——library与libraryTarget的用法/如何打包一个库文件

如何打印文档：选中要打印的文件，点击‘文件’->‘打印’ #生活常识# #日常生活技巧# #基础电脑操作#

【重学webpack系列——webpack5.0】

1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。
从第16节开始，专攻webpack原理和高级API，只有深入原理和高级API，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。
可以点击上方专栏订阅哦。

以下是本节正文：

commonjs与commonjs2的区别

// commonjs exports.add = function(a, b){ return a + b; } // commonjs2 module.exports = { add(a, b){ return a + b; } } 12345678910 library与libraryTarget library为导出库的名称libraryTarget为导出结果的形式 varcommonjscommonjs2thiswindowglobalumd

上面var的模式，在webpack中就会编译成：

(上面最后一条注释请忽略)

如果libraryTarget是commonjs的话，webpack中就会编译成：

**特别注意：**这个图是修改过了，请自行查看编译后的内容，exports.calculator = exports;这是会有问题的，原因是：webpack返回的是module.exports，而不是exports，所以，如果光给exports赋值的话，module.exports还是为初始值，即{}，那么引入的时候还是{} —— 这一点也是libraryTarget为commonjs时，会导致的问题！

举个例子：

// a.js exports = {age: 10} // Index.js const obj = require('./a.js') console.log(obj) // {} 123456

(上面最后一条注释请忽略)

如果libraryTarget是commonjs2的话，webpack中就会编译成：

(上面最后一条注释请忽略)

注意：webpack返回的是module.exports，而不是exports，所以，如果光给exports赋值的话，module.exports还是为初始值，即{}，那么引入的时候还是{} —— 这一点也是libraryTarget为commonjs时，会导致的问题！

举个例子：

// a.js exports = {age: 10} // Index.js const obj = require('./a.js') console.log(obj) // {} 123456

(上面最后一条注释请忽略)

导出的内容会挂载到this上，而这个this=module.exports=exports，所以this就是我们导出的内容

(上面最后一条注释请忽略)

window代表导出的内容挂载到window上

(上面最后一条注释请忽略)

global代表导出的内容挂载到global上

(上面最后一条注释请忽略)

umd的话，会根据导出的数据类型，去走不同的逻辑。也就是同时支持commonjs、commonjs2、amd、全局变量等。比如moment这个库用的就是umd

(function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') // 如果exports是对象并且commonjs2中的module是对象 module.exports = factory();// commonjs2才有modle else if(typeof define === 'function' && define.amd) define([], factory);// 如果define是函数并且define.amd存在，也就是说是amd else if(typeof exports === 'object') exports['MyLibrary'] = factory(); // 如果是对象 else root['MyLibrary'] = factory(); // 全局变量 })(typeof self !== 'undefined' ? self : this, function() { return _entry_return_; }); 123456789101112

另外：cmd、amd已经退出历史舞台了，淘汰了

网址：29.webpack——library与libraryTarget的用法/如何打包一个库文件 https://www.yuejiaxmz.com/news/view/551312

相关内容

Webpack之旅(二): webpack基本打包配置(Source
webpack自动化构建工具详细笔记，入门到实战，解决 webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，和webpack : 无法加载文件等等
Webpack 快速入门
webpack 打包 node 程序出现 No native build was found for platform 问题解决
Vue项目的打包方式（生成dist文件）
Webpack优化——将你的构建效率提速翻倍
vue 项目中 动态加载图片src的解决方法
vue.config.js配置之configureWebpack(两种用法)
Flutter Android Studio打包安卓apk文件
Vue驱动，购物新体验：揭秘如何打造高效便捷的在线购物网站

随便看看