前言
现代的web浏览器提供了很多新的JavaScript特性和API（比如Promise、fetch、箭头函数、模板字面量等），但是通过IE11或以下版本的浏览器访问网站时，可能会遇到一些问题：一些ES6或ES2015语言特性不可用，一些Native API也不可用。因此，我们需要在使用这些新语言特性和API之前，做好充分的兼容性检查和处理。
幸运的是，微软提供了一个npm包@microsoft/sp-polyfills，用于提供新的JavaScript特性和API的Polyfills以增强兼容性。
本文将介绍如何使用npm包@microsoft/sp-polyfills并提供一些示例代码。
安装
要使用@microsoft/sp-polyfills，首先需要在命令行中使用npm安装它：
npm install @microsoft/sp-polyfills --save
安装成功后，可以在node_modules/@microsoft/sp-polyfills/dist目录下找到它的代码。
使用
为了使用@microsoft/sp-polyfills，需要将它添加到你的项目中并调用它。你可以在入口文件（比如App.js）的顶部导入它：
import '@microsoft/sp-polyfills';
现在，你可以使用@ms/sp-polyfills的任何新特性和API了！如果您使用的是IE11或以下其他浏览器，这些特性和API将会被Polyfills。
需要注意的是，@ms/sp-polyfills将一些新的语言特性，如Promise和Set对象，以及新的API，如fetch，添加到全局命名空间里。因此，最好将这个库导入到你的项目的顶部，这样才能避免一些不必要的冲突。
示例
以下是一个示例App.js文件，显示如何使用@microsoft/sp-polyfills：
-- -------------------- ---- ------- ------ -------------------------- ------------------- ----- ------ - --- -- --- - ---- ----- ------- - ---- ------ -- ---- ------ -- --------------- ---------------- ----- ------------ - ------------------------------------------------------ -------------------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------展开代码
在上面的代码中，我们使用箭头函数和模板字面量，以及使用Promise API从jsonplaceholder API中获取数据。
因为我们已经在顶部导入了@microsoft/sp-polyfills，所以我们可以放心地使用这些新的特性和API，而无需担心兼容性问题。
结论
在现代的web开发中，我们经常使用一些新的JavaScript语言特性和API，但是为了确保跨浏览器兼容性，我们需要使用Polyfills库。
@microsoft/sp-polyfills是一个很好的选择，它提供了许多新特性和API的Polyfills以加强兼容性。您可以使用npm安装并将其导入到您的项目中。本文提供了一些示例，以展示如何使用@microsoft/sp-polyfills。
在您的下一个web项目中，使用@microsoft/sp-polyfills库并避免兼容性问题！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac5db5cbfe1ea06109eb
