Bắt đầu với Babel 7

Javascript là duy nhất do bề rộng của hệ sinh thái. Trong khi các tiêu chuẩn mới thêm đường cú pháp, khiến chúng được hỗ trợ trên các trình duyệt cần có thời gian. Babel hoạt động xung quanh vấn đề này thông qua chuyển phát tự động.

Ý tưởng đằng sau sản phẩm rất đơn giản: Babel nhận mã ES6 hoặc ES7 và thay thế các yếu tố cú pháp mới bằng mã mô phỏng. Đầu ra của nó xác nhận với cú pháp JavaScript cổ điển và chạy trên các trình duyệt cũ hơn như Internet Explorer.

Bản phát hành ban đầu của Babel đã chiếm thế giới bởi Storm. Ngay sau khi nó xuất hiện lần đầu tiên, các khung khác nhau như phản ứng, Vue và Ember nắm lấy nó. Các nhà phát triển thường sử dụng sản phẩm mà không biết rằng nó hoạt động trong nền - nhiều hơn một dự án NPM phổ biến có một phụ thuộc vào Babel.

• Cách tạo một ứng dụng

Những phụ thuộc này đã chuyển đổi quy trình phát hành của người tiền nhiệm thành một vụ xung đột đầy xung đột. Phiên bản 7, vẫn được quản lý bởi một nhóm duy trì nhỏ, do đó đã cố gắng tương thích nhất có thể. Thay đổi phá vỡ là rất ít và xa giữa, trong khi chất lượng tạo mã vẫn cao (nếu bạn đang làm việc với một nhóm, lưu tài liệu trong lưu trữ đám mây sẽ giúp bạn ở lại gắn kết).

Nếu bạn chưa từng làm việc với Babel trước đây, hãy để đây là hướng dẫn của bạn. Có thể sử dụng các tính năng JavaScript nâng cao mà không có lo lắng tương thích làm cho cuộc sống dễ dàng hơn nhiều.

Bạn có muốn một số công cụ để hợp lý hóa quy trình của bạn? Hướng dẫn của chúng tôi về tốt nhất người tạo ra trang web sẽ giúp. Muốn hỗ trợ lâu dài? Có được quyền web hosting dịch vụ.

01. Kiểm tra phiên bản.

Babel thường sống trong môi trường thời gian chạy nút. Hãy bắt đầu bằng cách kiểm tra các phiên bản được sử dụng. Đầu ra cung cấp trạng thái phiên bản được tìm thấy trên máy trạm Ubuntu 14.04 được sử dụng để tạo bài viết sau. Đây không phải là cá khổ - Con số đi kèm với bước này cho thấy nhóm Babel đã giảm hỗ trợ cho các phiên bản khá nhiều nút.

 tamhan @ tamhan-thinkpad: ~ $ nút --version
v8.14.0.
tamhan @ tamhan-thinkpad: ~ $ npm --version
6.4.1 

02. Thay đổi tên gói

Một sự thay đổi phá vỡ trong phiên bản 7 đã liên quan đến việc di chuyển các gói babel thành không gian tên của chính họ. Các gói cũ đã không bị xóa khỏi các kho khác nhau. Điều này rất quan trọng, vì việc sử dụng tên gói di sản dẫn đến tình huống được hiển thị trong hình đi kèm với bước này.

 Tamhan @ tamhan-thinkpad: ~ / workspaceb7 $ npm
Cài đặt --Save-dev @ Babel / Core @ Babel / CLI @
Babel / Preet-env @ Babel / Node
. . .
+ @ Babel / Core @ 7.2.0
+ @ Babel / nút @ 7.2.0
+ @ Babel / CLI @ 7.2.0
+ @ Babel / preet-env @ 7.2.0 

03. Thêm một hành động xây dựng

Bước trên giả định rằng bạn làm việc bên trong một dự án NPM. Trong trường hợp đó, chạy Babel thông qua hành động xây dựng là dễ dàng. Mở Gói.json. và sửa đổi nó như được chứng minh trong mã dưới đây:

 {
. . .
"chính": "index.js",
"kịch bản": {
"Kiểm tra": "Echo \" Lỗi: Không có bài kiểm tra
Được chỉ định \ "& amp; & amp; thoát 1",
"Xây dựng": "Babel Index.js -d lib"

}, 

04. Mã transpile bằng tay

Đặt Babel vào công việc liên quan đến việc bắn ra hành động xây dựng. Điều này được thực hiện tốt nhất thông qua lệnh chạy NPM. Các -d giá trị thông báo cho Babel rằng kết quả phải được đặt trong lib. Thư mục - Hình đồng hành cùng bước này cho thấy thư mục được tạo khi đang di chuyển.

 Tamhan @ tamhan-thinkpad: ~ / workspaceb7 $ npm
Chạy xây dựng.
& gt; [email protected] Xây dựng / Trang chủ / Tamnan /
Workspaceb7.
& gt; babel index.js -d lib
Tổng hợp thành công 1 tệp với Babel. 

05. Một câu hỏi về cấu hình

Gọi Babel mà không cần thêm các tùy chọn cấu hình không cho phép chuyển phát. Mã chỉ có thể được truyền tải nếu khung sẽ nhận thêm thông tin về môi trường mục tiêu. Điều này có thể được thực hiện thông qua một tham số dòng lệnh hoặc bằng cách tạo một tệp có tên .babelrc. trong rễ dự án.

06. Cấu hình Babelrc

Babel tự cấu hình thông qua một tập hợp các plugin, mỗi plugin áp dụng chuyển đổi chuyển đổi sang cơ sở mã. Chúng tôi sử dụng. đặt trước-env. Gói - Nó đi kèm với một bộ chuyển đổi được cấu hình sẵn nhằm bao phủ hầu hết các căn cứ.

 {
"Presets": ["@ Babel / Preset-Env]
} 

07. Thời gian cho một ổ đĩa thử nghiệm

Thêm một chút JavaScript tuổi mới vào Index.js để kiểm tra chương trình đối với một số mã trực tiếp. Mã đi kèm với bước này sẽ không hoạt động trên các trình duyệt cũ - khi hoàn tất, hàm ngầm được thay thế bằng một bình thường tuyên bố, như thể hiện trong hình.

chức năng tamstest () {
[1, 2, 3] .map ((n) = & gt; n + 1);
} 

08. Điều chỉnh nhắm mục tiêu

đặt trước-env. Áp dụng hầu hết các transpylation theo mặc định: Mục tiêu của sản phẩm là tạo ra JavaScript tương thích phổ biến mà không liên quan đến băng thông và chi phí hiệu suất. Bạn có thể thay đổi cấu hình của nó bằng cách truyền trong một mục tiêu Đối tượng - Ví dụ dưới đây nhắm vào các phiên bản cụ thể của Chrome và IE.

 {
"Presets": [
[
"@ Babel / Preset-env",
Đồn là
"Targets": {
"Chrome": "58",
"IE": "11"
Không thể
Không thể
Của
Của
} 

09. Nhắm mục tiêu nâng cao

Nhắm mục tiêu trình duyệt của Babel không giới hạn ở Chrome và Internet Explorer. Nhờ sự hợp tác với BrowserList. , các nhà phát triển có thể kết hợp và phù hợp với nhiều hơn một chục mục tiêu, như được hiển thị bên dưới.

Tên là trường hợp không nhạy cảm:

• Android. Đối với Android WebView.
• Baidu. cho trình duyệt Baidu.
• BlackBerry. hoặc là bb. Đối với trình duyệt BlackBerry.
• Trình duyệt Chrome Đối với Google Chrome.
• Chromeandroid. hoặc là và_chr. Đối với Chrome cho Android.
• Cạnh Đối với cạnh của Microsoft.
• Electron. cho khung điện tử. Nó sẽ được chuyển đổi thành phiên bản Chrome.
• nhà thám hiểm hoặc là I E Đối với Internet Explorer.
• Explorermobile. hoặc là IE_MOB. Đối với Internet Explorer Mobile.
• Firefox. hoặc là ff. cho Mozilla Firefox.
• Firefoxandroid. hoặc là và_ff. Đối với Firefox cho Android.
• ios. hoặc là ios_saf. Đối với iOS Safari.
• Nút cho node.js.opera cho opera.
• Operamini. hoặc là op_mini. cho opera mini.
• Operamobile. hoặc là op_mob. Đối với Opera Mobile.
• QQAndroid. hoặc là và_qq. Đối với trình duyệt QQ cho Android.
• Safari. cho Safari để bàn.
• Samsung Đối với internet Samsung.
• Ucandroid. hoặc là và_uc. Đối với trình duyệt UC cho Android.

10. Nhắm mục tiêu nâng cao, Phần thứ hai

Trình duyệt cũng có thể có các truy vấn nâng cao. Trang chủ của nó liệt kê các tùy chọn cấu hình, hầu hết tất cả đều có thể được sử dụng bên trong Babel bằng cách sửa đổi Babelrc. . Truy vấn có thể được đánh giá cục bộ nếu máy trạm của bạn đã được cài đặt NPX.

 {
"Mục tiêu": "& gt; 0,25%, không chết"
} 

11. Transpilation tự động

Phải gọi babel bằng tay trở nên tẻ nhạt nhanh chóng. Tiện ích Nodemon giám sát các tài nguyên hệ thống tập tin và bắn ra các lệnh vì những thay đổi được phát hiện. Về lý thuyết, việc thêm hỗ trợ Nodemon được xử lý thông qua một thay đổi nhỏ để Gói.json. .

 {
"Tên": "WorkspaceB7",
. . .
"chính": "index.js",
"kịch bản":
Đồn là
"Bắt đầu": "Nodemon -exec Babel-Node
index.js ", 

12. Kiểm tra sự hiện diện

Một số máy trạm có. Nodemon. được cài đặt trên toàn cầu. Nếu đây không phải là trường hợp, hãy gọi chương trình sẽ mang lại thông báo lỗi tương tự như tệp hiển thị bên dưới. May mắn thay, triển khai Nodemon. dễ dàng được thực hiện thông qua Cài đặt NPM chỉ huy.

 Tamhan @ tamhan-thinkpad: ~ / workspaceb7 $ npm
Cài đặt --Save-dev Nodemon 

13. Chức năng kiểm tra

Lửa ra NPM bắt đầu trong một cửa sổ đầu cuối và tiến hành thay đổi nội dung của index.js. với một biên tập viên như gedit hoặc Visual Studio Mã. . Sau khi tiết kiệm, Nodemon. sẽ xuất thông tin trạng thái.

 [Nodemon] khởi động lại do thay đổi ...
[Nodemon] Bắt đầu `babel-node index.js`
[Nodemon] Thoát sạch - Chờ đợi thay đổi
Trước khi khởi động lại 

14. Sửa chữa transpilation.

Trong khi Nodemon. Phát hiện sẽ hoạt động hoàn hảo vào thời điểm này, nội dung của index.js. tập tin được tìm thấy trong lib. đừng Cập nhật. Điều này được gây ra bởi một sự tốt đẹp của Babel-Node. - Nó không cam kết các tệp transpiled vào đĩa. Thay vào đó, nó bắn ra một phiên bản sửa đổi của nút CLI, hoạt động với các tệp được truyền.

15. Mã transpile lập trình

Babel không giới hạn trong việc làm việc trên dòng lệnh. Nếu các gói chính xác được cài đặt, mã cũng có thể được truyền từ một chương trình khác. Đoạn trích đi kèm với bước này áp dụng một tập hợp các biến đổi cơ bản cho một chuỗi đầu vào. Hãy nhớ rằng các cài đặt cấu hình, thông thường, được lấy từ một Babelrc. tập tin.

 var babel = yêu cầu ("@ babel / lõi");
nhập {biến đổi} từ "@ babel / lõi";
nhập khẩu * như Babel từ "@ Babel / lõi";
babel.transform ("mã ();", tùy chọn,
chức năng (err, kết quả) {
kết quả.code;
kết quả.map;
kết quả .ast;
}); 

16. Toàn bộ tệp transpile

Mã nguồn thường không được lưu trữ trong các biến chuỗi. API Babel chiếm điều này thông qua một tập hợp các chức năng liên quan đến tệp, sẽ từ bỏ chuỗi đầu vào cho một biến với tên tệp. Tuy nhiên, các kết quả được trả về dưới dạng một biến JavaScript thông thường.

 Babel.transformfile ("filename.js", tùy chọn,
chức năng (err, kết quả) {
kết quả; // = & gt; {Code, Map, Ast}
Không thể
); 

17. Đồng bộ hóa và không đồng bộ

Babel 7 đã giới thiệu các phiên bản đồng bộ và không đồng bộ của hầu hết các cuộc gọi API. Đảm bảo chọn đúng cho nhu cầu của bạn - trong khi transupiling các ví dụ nhỏ có thể được thực hiện, cài đặt Babel lỏng lẻo trên các tệp phức tạp hơn có thể dễ dàng dẫn đến sự chậm trễ chạy vào hàng chục giây.

18. Tìm hiểu về các plugin cá nhân

Nếu bạn thấy mình tự hỏi về những gì xảy ra trong nền, chỉ cần ghé thăm trang này . Nó cung cấp một danh sách tất cả các plugin hiện có trong phân phối Babel và cũng chứa một vài gợi ý cho tất cả những người tìm cách tạo một plugin của riêng họ.

19. Dải ra các loại chi tiết cụ thể

Babel không giới hạn trong các yếu tố JavaScript trong độ tuổi mới. Sản phẩm chứa một công cụ typcript bị ràng buộc tính năng. Nó tước thông tin gõ và thay thế các yếu tố nâng cao. Đáng buồn thay, Babel không thực hiện kiểm tra loại - Điều này giúp loại bỏ một trong những lợi ích quan trọng nhất của ngôn ngữ Typecript.

 {
"Các cài đặt trước": ["@ babel / preset-tyrcript"]
} 

20. Chạy Babel trực tuyến

Trong khi các hoạt động xuyên tã thường hoạt động trơn tru, đôi khi các vấn đề xảy ra. Trong trường hợp đó, Babel REPL. là hữu ích. Nó chạy babel trong trình duyệt máy trạm của bạn và hiển thị đầu vào và đầu ra ngay bên cạnh nhau.

21. Tìm hiểu về điểm đau

Giới thiệu của chúng tôi giải thích rằng Babel thấy việc sử dụng rộng rãi trên nhiều dự án khác nhau. Nhóm duy trì của Babel đơn giản hóa nâng cấp phiên bản với một Đăng nhập thay đổi chi tiết. . Nếu bạn sử dụng Babel lập trình, đừng quên tham khảo ý kiến Hướng dẫn nâng cấp API. .

Bài viết này ban đầu được xuất bản trong số 283 của Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . MUA VẤN ĐỀ 283 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

• Cách mã nhanh hơn, bật lửa JavaScript
• 5 API JavaScript tuyệt vời
• 27 mẫu trang web hàng đầu