Polyfills và Transpilation cho các yếu tố tùy chỉnh của bạn
Ta đã đề cập đến những điều cơ bản vềcách tạo các phần tử tùy chỉnh bằng cách sử dụng thông số kỹ thuật của Thành phần Web, nhưng ở phần cuối, ta gợi ý rằng phần tử tùy chỉnh đơn giản của ta chưa sẵn sàng production vì việc sử dụng các tính năng JavaScript mới và thực tế là Phần tử tùy chỉnh và Shadow DOM không được hỗ trợ trong tất cả các trình duyệt phổ biến.
Trong bài đăng này, ta sẽ nhanh chóng xem qua các bước để chuyển mã phần tử tùy chỉnh của bạn để tương thích với ES5 và bao gồm các polyfills Thành phần Web cần thiết.
Sự vận chuyển
Mã phần tử tùy chỉnh của bạn sẽ chứa các lớp ES6 và có thể cũng sẽ chứa các ký tự chuỗi và các hàm mũi tên . Các tính năng này rất hữu ích để sử dụng tại thời điểm tác giả, nhưng mã phải được chuyển đổi bằng một công cụ như Babel để nó có thể chạy trong các trình duyệt chỉ hiểu mã ES5. Ta sẽ tiếp tục và sử dụng babel-cli và cài đặt trước babel-preset-es2015 để làm điều đó.
Nếu dự án của bạn chưa có file package.json , hãy tiếp tục tạo một file bằng npm hoặc Yarn . Điều này sẽ cho phép bạn cài đặt các gói cần thiết:
$ npm init
# or, using Yarn
$ yarn init
Sau khi hoàn tất, bạn có thể tiếp tục và cài đặt các gói cần thiết:
$ npm install babel-cli babel-preset-es2015 --save-dev
# or, using Yarn
$ yarn add babel-cli babel-preset-es2015 --dev
Ta sẽ xuất mã đã chuyển của ta vào một folder dist , vì vậy bạn có thể tiếp tục và tạo folder đó ở folder root của dự án của bạn . Đến đây bạn có thể thêm một tập lệnh xây dựng vào file package.json của bạn chạy Babel với cài đặt trước es2015 và xuất kết quả trong folder dist :
{
"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"
}
}
Đến đây bạn có thể tiếp tục và chạy quá trình chuyển đổi:
$ npm run build
# or, using Yarn
$ yarn build
Polyfills
Polyfills là các plugin nhỏ triển khai một tính năng để thay thế triển khai root bị thiếu cho các trình duyệt chưa có hỗ trợ. Đối với Thành phần Web, ta cần các polyfills cho Phần tử tùy chỉnh, Shadow DOM và phần tử mẫu . May mắn cho ta là WebComponents.org duy trì một bộ polyfills giúp bạn dễ dàng đưa các polyfills cần thiết vào các dự án của bạn .
Bộ này cung cấp một tập hợp các gói làm sẵn để bạn lựa chọn. Ví dụ: gói webcomponents-lite.js , gói polyfills nhập HTML, Phần tử tùy chỉnh, Shadow DOM (với polyfills được gọi là Shady DOM và Shady CSS ) và phần tử mẫu. Gói đó sẽ đảm bảo các phần tử tùy chỉnh của bạn sẽ hoạt động trở lại Internet Explorer 11.
webcomponents-loader.js
Ngoài ra còn có một trình tải có sẵn, webcomponents-loader.js , sẽ thực hiện một số phát hiện tính năng và bao gồm các polyfills cần thiết khi đang di chuyển. Sử dụng trình tải có lẽ là cách đơn giản nhất để mọi thứ hoạt động và Đây là kết quả ta sẽ sử dụng ở đây cho ví dụ của ta .
Các phần tử tùy chỉnh cần được xác định bằng cách sử dụng các lớp ES6 mở rộng HTMLElement , nhưng bây giờ ta đang sử dụng mã chuyển vị đã loại bỏ cú pháp lớp. Ta cần sử dụng file có tên custom-Elements-es5-adapter.js để sửa lỗi đó cho ta .
Tại thời điểm viết bài này, webcomponents-loader.js sẽ được cài đặt qua Bower, vì vậy bạn cần đảm bảo mình có sẵn Bower bằng cách chạy npm install -g bower .
Chỉ cần cài đặt gói webcomponentsjs vào dự án của bạn bằng cách sử dụng Bower. Thao tác này sẽ cài đặt các file cần thiết trong folder bower_components :
$ bower install --save webcomponents/webcomponentsjs
Bây giờ, trong phần đầu trang web , hãy bao gồm custom-Elements-es5-adapter.js và webcomponents-loader.js :
<script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
Bước cuối cùng là chỉ bao gồm tập lệnh cho phần tử tùy chỉnh đã chuyển của bạn khi sự kiện WebComponentsReady kích hoạt. Đó là một sự kiện tùy chỉnh được trình tải kích hoạt khi các polyfills cần thiết đã được tải. Ta chỉ cần tạo một phần tử script , đặt thuộc tính src của nó thành đường dẫn của mã phần tử tùy chỉnh đã chuyển của ta và nối nó vào phần đầu của tài liệu:
window.addEventListener('WebComponentsReady', function () {
var myTitleScript = document.createElement('script');
myTitleScript.src = 'dist/my-title.js';
document.head.appendChild(myTitleScript);
});
Đây là cách tệp index.html cuối cùng của ta trông như thế nào:
<!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>
🔧 Và hoàn thành! Phần tử tùy chỉnh của bạn hiện đã sẵn sàng để đưa vào các dự án production của bạn.
Các tin liên quan
