Webpack学习笔记(9)

Shimming预置依赖

预置全局变量

例如lodash:

细颗粒度shimming

当模块运行在commonjs上下文中,this指向的是module.exports并不是window,所以可以覆盖一下。

安装npm i imports-loader -D

配置后this指向window:

全局Exports

全局导出一个模块:

加载Polyfills

当新的 JavaScript 特性或 API 被引入时,旧版浏览器可能不支持这些特性。Polyfills 通过提供与新特性相同功能的代码,使得这些特性在旧版浏览器中也能正常工作。

npm i @babel/polyfill -D

优化polyfill

不建议直接使用import @babel/polyfill,这样做会全局引入整个polyfill包,比如array.from全局引入,不但体积大,而且还会污染全局环境。使用babel-preset-env

npm i babel-loader @babel/core @babel/preset-env -D

创建Library

自定义一个模块打包,可供使用

配置library,type可以设置为:window,commonjs,module,amd等等,可以设置为umd可满足多个type但不包括module

发布为npm-package

登录npm

npm config get registry

npm adduser输入用户名密码等

npm publish发布,其他人可以使用

使用时npm i 名字 -D

然后可以使用require引入:

相关推荐
the_answer1 天前
Webpack vs Vite 深度对比分析
前端·webpack
RainCity3 天前
Java Swing 自定义组件库分享(十二)
java·笔记·后端
玄玄子4 天前
webpack publicPath作用原理
前端·webpack·程序员
谷无姜5 天前
Webpack5 进阶思考:那些官方文档没讲清楚的事
前端·webpack
柯克七七5 天前
我把祖传项目的构建时间砍了90%,领导以为我只是在"优化了一下",结果隔壁组的CI都崩了来问我配置
前端·webpack
LinXunFeng10 天前
Obsidian - 使用 Share Note 分享笔记并自部署
前端·笔记·github
通信小呆呆14 天前
当算法有了“五感”:多模态数据融合如何向人体感官协同学习?
人工智能·学习·算法·机器学习·机器人
H__Rick14 天前
自动对焦学习-3
人工智能·学习·计算机视觉
Daisy Lee14 天前
量化学习-第1章-什么是量化金融
学习·金融·datawhale
Alsn8614 天前
等待学习-学习目录:Docker 容器安全攻防
学习·安全·docker