自定义元素的 Polyfill 和转译

发表 admin at 2024年8月26日

类别

未分类

标签

我们介绍了使用 Web 组件规范创建自定义元素的基础知识，但最后我们暗示我们的简单自定义元素尚未投入生产，因为使用了新的 JavaScript 特性，而且自定义元素和Shadow DOM尚未得到所有流行浏览器的支持。

在这篇文章中，我们将快速介绍转换自定义元素代码以与 ES5 兼容并包含必要的 Web 组件 polyfill 的步骤。

转译

您的自定义元素代码将包含 ES6 类，并且可能还包含字符串文字和箭头函数。这些功能在编写时非常有用，但必须使用Babel等工具对代码进行转译，以便它可以在仅理解 ES5 代码的浏览器中运行。我们将继续使用babel-cli和babel-preset-es2015预设就是这样做的。

如果你的项目没有包名.json文件尚未创建，继续使用 npm 或Yarn创建一个。这将允许您安装必要的软件包。：

$ npm init

# or, using Yarn
$ yarn init

完成后，您可以继续安装必要的软件包：

$ npm install babel-cli babel-preset-es2015 --save-dev

# or, using Yarn
$ yarn add babel-cli babel-preset-es2015 --dev

我们将转换后的代码输出到分布文件夹，因此您可以继续在项目根目录中创建该文件夹。现在您可以添加一个建造脚本将运行带有es2015预设的 Babel 并将结果输出到dist文件夹中：

包名.json

{
  "name": "my-title",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "babel --presets es2015 my-title.js --out-file dist/my-title.js"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

现在您可以继续运行转译：

$ npm run build

# or, using Yarn
$ yarn build

Polyfills

Polyfill 是一些小型插件，用于实现一项功能，以替换尚不支持的浏览器缺少的本机实现。对于 Web 组件，我们需要自定义元素、Shadow DOM 和模板元素。幸运的是，WebComponents.org维护了一套polyfill，可让您轻松地将所需的 polyfill 包含在您的项目中。

该套件提供了一组现成的软件包可供选择。例如，webcomponents-lite.js软件包，其中包含 HTML 导入、自定义元素、Shadow DOM（带有名为Shady DOM和Shady CSS的 polyfill ）和模板元素。该软件包将确保您的自定义元素可以一直工作到 Internet Explorer 11。

webcomponents-loader.js

还有一个可用的加载器，webcomponents-loader.js，它将执行一些功能检测并动态包含必要的 polyfill。使用加载器可能是让一切正常工作的最简单方法，这就是我们在此示例中使用的方法。

自定义元素需要使用扩展的 ES6 类来定义HTML元素，但现在我们使用了已删除类语法的转译代码。我们需要使用一个名为自定义元素-es5-adapter.js来帮我们解决这个问题。

在撰写本文时，webcomponents-loader.js应该通过 Bower 安装，因此您需要通过运行来确保 Bower 可用npm install -g bower。

只需安装webcomponentsjs使用 Bower 将软件包安装到您的项目中。这将在bower_components文件夹：

$ bower install --save webcomponents/webcomponentsjs

现在，在页面头部，添加自定义元素-es5-adapter.js和webcomponents-loader.js：

index.html（部分）

<script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>

最后一步是，仅当WebComponentsReady事件触发。这是一个自定义事件，当必要的 polyfill 加载完成后，加载器会触发该事件。我们只需创建一个脚本元素，将其src属性设置为我们转译的自定义元素代码的路径，并将其附加到文档的头部：

window.addEventListener('WebComponentsReady', function () {
  var myTitleScript = document.createElement('script');
  myTitleScript.src = 'dist/my-title.js';
  document.head.appendChild(myTitleScript);
});

以下是我们的最终索引.html文件如下所示：

索引.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Custom Element!</title>

  <script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
</head>

<body>
  <my-title></my-title>

  <script>
    window.addEventListener('WebComponentsReady', function () {
      var myTitleScript = document.createElement('script');
      myTitleScript.src = 'dist/my-title.js';
      document.head.appendChild(myTitleScript);
    });
  </script>
</body>

</html>