世界上最伟大的投资就是投资自己的教育
https://www.qiuzhi99.com/movies/qing-song-webpack-4-15-babel-polyfill-nei-xie-shi-er-part-1-1
https://babeljs.io/docs/en/next/babel-polyfill
https://babeljs.io/docs/en/next/babel-runtime.html
https://segmentfault.com/a/1190000008159877
https://zhuanlan.zhihu.com/p/29058936
https://juejin.im/entry/5b108f4c6fb9a01e5868ba3d
https://www.jianshu.com/p/73ba084795ce
http://bluebirdjs.com/docs/getting-started.html
babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,比如:
全局对象:Promise、WeakMap 等。
全局静态函数:Array.from、Object.assign 等。
实例方法:比如 Array.prototype.includes 等。
此时,需要引入babel-polyfill来模拟实现这些对象、方法。
引入babel-polyfill会有一定副作用,比如:
引入了新的全局对象:比如Promise、WeakMap等。
修改现有的全局对象:比如修改了Array、String的原型链等。
在应用开发中,上述行为问题不大,基本可控。但如果在库、工具的开发中引入babel-polyfill,则会带来潜在的问题。
举个例子,我在项目中定义了跟规范不一致的Array.from()函数(别管我为什么不一样,就是这么任性),同时引入了一个库(依赖babel-polyfill),此时,这个库可能覆盖了自定义的Array.from()函数,导致出错。
这就是babel-runtime存在的原因。它将开发者依赖的全局内置对象等,抽取成单独的模块,并通过模块导入的方式引入,避免了对全局作用域的修改(污染)。
import '@babel/polyfill'
Object.assign({})
Array.from([1,2,3])
new Promise(resolve => console.log('promise'))
function* geneFn() {
yield 1
}
let g = geneFn()
g.next()
async function getPosts() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
return data;
}
getPosts().then(posts => console.log(posts))
03:201Free轻松学 Webpack 4 免费视频教程 #1 课程介绍
05:042Free轻松学 Webpack 4 免费视频教程 #2 安装
05:483Free轻松学 Webpack 4 免费视频教程 #3 zero config
06:464Free轻松学 Webpack 4 免费视频教程 #4 Mode
05:125Free轻松学 Webpack 4 免费视频教程 #5 搭建项目
05:046Free轻松学 Webpack 4 免费视频教程 #6 用 npx 来解决全局安装的问题
04:387Free轻松学 Webpack 4 免费视频教程 #7 配置文件 Webpack.config.js
04:418Free轻松学 Webpack 4 免费视频教程 #8 配置多入口文件 Entry Points
04:329Free轻松学 Webpack 4 免费视频教程 #9 什么是 Babel
05:0910Free轻松学 Webpack 4 免费视频教程 #10 babel-loader 的介绍与安装
05:2911Free轻松学 Webpack 4 免费视频教程 #11 Babel Plugins - plugin-transform-arrow-functions
07:1912Free轻松学 Webpack 4 免费视频教程 #12 Babel Plugins - 更多的插件
05:2613Free轻松学 Webpack 4 免费视频教程 #13 Babel Presets - @babel/preset-env
02:3814Free轻松学 Webpack 4 免费视频教程 #14 devtool false 让编译后的代码可读性强一些
04:4315Free轻松学 Webpack 4 免费视频教程 #15 @babel/polyfill 的那些事儿 part 1
06:5816Free轻松学 Webpack 4 免费视频教程 #16 @babel/polyfill 的那些事儿 part 2 - 原理及如何解决
05:1117Free轻松学 Webpack 4 免费视频教程 #17 @babel/polyfill 的那些事儿 part 3 - preset-env 的选项和按须编译
06:02Free轻松学 Webpack 4 免费视频教程 #18 @babel/runtime
05:1219Free轻松学 Webpack 4 免费视频教程 #19 @babel/plugin-transform-runtime 是如何工作的
05:4420Free轻松学 Webpack 4 免费视频教程 #20 打造 React 开发环境
08:1921Free轻松学 Webpack 4 免费视频教程 #21 使用第一个 Webpack 插件 html-Webpack-plugin
08:0522Free轻松学 Webpack 4 免费视频教程 #22 配置多个单页面应用
04:4523Free轻松学 Webpack 4 免费视频教程 #23 使用 loader 来处理 CSS
06:3424Free轻松学 Webpack 4 免费视频教程 #24 使用 loader 来处理 Sass 和 Less 文件
08:0725Free轻松学 Webpack 4 免费视频教程 #25 用 mini-css-extract-plugin 把 CSS 分离成文件
04:5426Free轻松学 Webpack 4 免费视频教程 #26 启动服务器并实时刷新 Webpack-dev-server
04:5527Free轻松学 Webpack 4 免费视频教程 #27 用 clean-Webpack-plugin 来清除文件
07:5928Free轻松学 Webpack 4 免费视频教程 #28 如何打包图片(包含规划编译出的文件的目录结构)
03:3929Free轻松学 Webpack 4 免费视频教程 #29 如何压缩图片
17:0830Free轻松学 Webpack 4 免费视频教程 #30 构建开发和生产环境 - 分离配置文件
02:3831Free轻松学 Webpack 4 免费视频教程 #31 显示打包进度条
03:5032Free轻松学 Webpack 4 免费视频教程 #32 调整配置 - 在浏览器显示 DevServer 的 编译错误的信息
10:5233Free轻松学 Webpack 4 免费视频教程 #33 devtool 和 source map 深入解析
10:0734Free轻松学 Webpack 4 免费视频教程 #34 解决开发环境和生产环境打包不一致的情况
12:3435Free轻松学 Webpack 4 免费视频教程 #35 打包优化 - 深入探索 mode、Optimization、terser-Webpack-plugin、UglifyjsWebpackPlugin
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
知乎:https://www.zhihu.com/people/rails365
掘金:https://juejin.cn/user/1574156379888263
b 站:https://space.bilibili.com/31152817
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
Discord:https://discord.gg/5rdjnEnU7F
Twitter:https://twitter.com/qiuzhi99pro
Facebook:https://twitter.com/qiuzhi99pro
Instagram:https://www.facebook.com/pro.qiuzhi/
▬▬▬▬▬▬ 微信相关 👋 ▬▬▬▬▬▬




© 汕尾市求知科技有限公司 | 专业版网站 | 在线学员:1131
粤公网安备 44152102000088号
| 粤ICP备19038915号