如何在 Babel 中使用 polyfills-JavaScript中文网-JavaScript教程资源分享门户

在现代网络应用程序中，跨浏览器和跨设备的兼容性已经成为一个很大的问题。尽管不同的浏览器和设备都能支持 ES6+ 的语言特性，但是有时候还需要使用 Polyfills 来使一些旧浏览器支持这些特性。在本文中，我们将介绍如何在 Babel 中使用 Polyfills 来提高应用程序的可兼容性。

什么是 Polyfills？

Polyfills 是在旧浏览器中提供新的函数定义的 JavaScript 代码。它通过模拟新功能的行为来使旧的浏览器能够使用新的 API。 Polyfills 可以模拟 ECMAScript 协议中的任何新功能，例如功能字符串，类， Promise，Set 和 Map 等。可以将 Polyfills 想象为工具，用于为旧版浏览器添加缺失的功能，以便应用程序能够在所有浏览器上执行。

Babel 和 Polyfills

Babel 是一个 JavaScript 编译器，它可以将 ES6+ 代码转换为向后兼容的 JavaScript，以便支持旧版浏览器。 Babel 的主要优势是它可以提供对新语法的语法转换，但是转换后的代码仍然需要 Polyfills 来支持 API（Application Programming Interface）。如果需要让 ES6+ 的代码在运行时在旧版浏览器上运行，则需要在 Babel 中使用这些 Polyfills。

在 Babel 中使用 Polyfills 有两个步骤：

安装需要的 Polyfills：

可以使用以下命令安装所需的 Polyfills：

npm install --save @babel/polyfill

将安装的 Polyfills 加载到应用程序中：

在 JavaScript 应用程序中，您需要确保在任何其他代码之前导入这个库。使用以下代码：

import "@babel/polyfill";

现在，您的 JavaScript 应用程序应该在所有浏览器中正常工作，包括旧版浏览器。

示例代码

以下示例演示如何使用 Babel 和 Polyfills。

index.js

[1, 2, 3].forEach((item) => console.log(item))

webpack.config.js

// www.javascriptcn.com code example
module.exports = {
  entry: {
    app: './index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

package.json

// www.javascriptcn.com code example
{
  "name": "babel-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.10.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

现在，在运行 webpack 命令后，在 dist/app.bundle.js 文件中可以看到包含 Polyfills 的代码。该文件可以在任何浏览器中正常运行，包括旧版浏览器，而不会出现语法错误。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7d392a941bf7134e016b8

如何在 Babel 中使用 polyfills