babel &es6垫片 polyfill

最新推荐文章于 2024-03-10 17:49:00 发布

TZOF_

最新推荐文章于 2024-03-10 17:49:00 发布

阅读量504

点赞数

分类专栏：前端工程化

原文链接：https://blog.csdn.net/CarrreyYan_979292/article/details/104469706

版权

前端工程化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

babel &es6垫片 polyfill

Babel 作用编译es678语法。也可以配合其他工具使用例如：gulp webpac
也有Babel 不能编译的可以使用垫片 pollyfill 解决；垫片采用是 es3 进行编写的

es6/polyfill

Polyfill 可以为旧浏览器提供和标准 API 一样的功能。比如你想要 IE 浏览器实现 Promise 和 fetch 功能，你需要手动引入 es6-promise、whatwg-fetch。而通过 Polyfill.io，你只需要引入一个 JS 文件。

Polyfill.io 通过分析请求头信息中的 UserAgent 实现自动加载浏览器所需的 polyfills。
Polyfill.io 有一份默认功能列表，包括了最常见的 polyfills：document.querySelector、Element.classList、ES5 新增的 Array 方法、Date.now、ES6 中的 Object.assign、Promise 等。

异步加载
提供callback参数，当polyfill加载成功之后执行对应函数

<!-- 异步加载 -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?callback=main" async defer></script>
实例运用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?callback=main" async defer></script>
    <script>
        function main(){
            var node=document.createElement("script");
            node.src="index.js";
            document.body.appendChild(node);
        }
    </script>
</head>
<body>
    
</body>
</html>

polyfill在实际运用过程中，是个不错的解决方案

TZOF_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
babel &es6垫片 polyfill

babel &es6垫片 polyfillBabel 作用编译es678语法。也可以配合其他工具使用例如：gulp webpac也有Babel 不能编译的可以使用垫片 pollyfill 解决；垫片采用是 es3 进行编写的es6/polyfillPolyfill 可以为旧浏览器提供和标准 API 一样的功能。比如你想要 IE 浏览器实现 Promise 和 fetch 功能，你需要手动引入 es6-promise、whatwg-fetch。而通过 Polyfill.io，你只需要
复制链接

扫一扫