Tôi đang tìm cách chạy mã ECMAScript 6 trong bảng điều khiển của trình duyệt nhưng hầu hết các trình duyệt không hỗ trợ chức năng mà tôi đang tìm kiếm. Ví dụ Firefox là trình duyệt duy nhất hỗ trợ các chức năng mũi tên.
Có cách nào (tiện ích mở rộng, mô tả người dùng, v.v.) Tôi có thể chạy các tính năng này trên Chrome không?
Câu trả lời:
Trong Chrome, hầu hết các tính năng ES6 được ẩn sau một cờ gọi là "Tính năng JavaScript thử nghiệm". Truy cập chrome://flags/#enable-javascript-harmony, bật cờ này, khởi động lại Chrome và bạn sẽ nhận được nhiều tính năng mới .
Các chức năng mũi tên chưa được triển khai trong V8 / Chrome , vì vậy cờ này sẽ không "mở khóa" các chức năng mũi tên.
Vì các hàm mũi tên là một thay đổi cú pháp, không thể hỗ trợ cú pháp này mà không thay đổi cách phân tích cú pháp JavaScript. Nếu bạn thích phát triển trong ES6, thì bạn có thể viết mã ES6 và sử dụng trình biên dịch ES6-ES5 để tạo mã JavaScript tương thích với tất cả các trình duyệt hiện đại (hiện đại).
Ví dụ: xem https://github.com/google/traceur-compiler . Khi viết, nó hỗ trợ tất cả các tính năng cú pháp mới của ES6 . Cùng với cờ được đề cập ở đầu câu trả lời này, bạn sẽ tiến rất gần đến kết quả mong muốn.
Nếu bạn muốn chạy cú pháp ES6 trực tiếp từ bảng điều khiển, thì bạn có thể thử ghi đè trình đánh giá JavaScript của bàn điều khiển (như trình tiền xử lý Traceur được chạy trước khi thực thi mã). Nếu bạn thích làm điều này, hãy xem câu trả lời này để tìm hiểu cách sửa đổi hành vi của các công cụ dành cho nhà phát triển.
classcú pháp chẳng hạn.
--enable-javascript-harmonycờ được đặt: /(?<!a)b/.test('ab')(và ném lỗi tiếp theo nếu cờ không được đặt: "Uncaught SyntaxError: Biểu thức chính quy không hợp lệ: / (? <! A) b /: Nhóm không hợp lệ")
Babel là một bộ chuyển mã tuyệt vời để dùng thử ES6. Bạn có thể chạy ES6 trong trình duyệt trong phần "Dùng thử" trên trang web của họ. Nó hoạt động tương tự như jsfiddle.
Mũi tên chẳng hạn:
let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);
hiển thị kết quả 2 .
Babel "transpiles", đó là dịch ES6 sang javascript ES5 có thể được chạy bởi công nghệ trình duyệt hiện tại. Bạn có thể cài đặt Babel qua npm install -g babel. Sau khi cài đặt, bạn có thể lưu ví dụ mũi tên ở trên vào một tệp. Giả sử chúng tôi gọi tệp "ES6.js". Giả sử bạn đã cài đặt nút thì tại ống dòng lệnh đầu ra cho nút:
babel ES6.js | node
Và bạn sẽ thấy đầu ra 2. Bạn có thể lưu tệp dịch vĩnh viễn bằng lệnh:
babel ES6.js --out-file output.js
output.js "được phiên mã":
"use strict";
var add = function (x, y) {
return x + y;
};
var result = add(1, 2);
console.log(result);
Mà tất nhiên có thể được chạy trong bất kỳ trình duyệt hiện đại.
ES6 là một mục tiêu di chuyển nhanh. Tham khảo Bảng tương thích để tìm các tính năng được hỗ trợ bởi các bộ chuyển đổi như Traceur và Babel và hỗ trợ trình duyệt. Bạn thậm chí có thể mở rộng biểu đồ để xem thử nghiệm được sử dụng để xác minh tính tương thích:
Để dùng thử ES6, bạn có thể thử các kênh phát hành hàng đêm của Firefox hoặc Chrome
sudo npm install -g --save-dev babel-cli babel-preset-es2015và $(npm bin)/babel ES6.js --presets es2015để nó hoạt động, rf: babeljs.io/docs/plugins/preset-es2015
Bạn có thể đang tìm kiếm một trong các liên kết sau:
Sử dụng Babel trong đường ống phát triển của bạn sẽ tự động phiên mã (chuyển đổi) JavaScript của bạn để tương thích với nhiều trình duyệt. Hoặc, nếu bạn đang sử dụng TypeScript, bạn có thể yên tâm; mã của bạn đã được dịch mã.
Không muốn thiết lập trình chuyển mã (chẳng hạn như Babel / Bản mô tả) hoặc bạn có muốn chơi với các tính năng chưa được hỗ trợ bởi trình chuyển mã của bạn không?
Bạn có thể bật các tính năng ECMAScript thử nghiệm trong trình duyệt của mình bằng cách truy cập chrome: // flags / # enable-javascript-Harmony và bật cờ JavaScript Harmony. Đối với một số tính năng, bạn có thể phải sử dụng Chrome Canary với cờ JavaScript Harmony được bật.
API JavaScript mới thường không được Babel bao phủ và sẽ có cờ Chrome riêng.
Câu hỏi này được đề cập cụ thể bằng cách sử dụng các chức năng mũi tên. Các chức năng mũi tên hiện được hỗ trợ nguyên bản trong tất cả các trình duyệt trừ IE và Opera Mini. Xem caniuse .
Nó từng là một chút khó khăn nếu bạn muốn chơi với các chức năng mũi tên. Lịch sử dưới đây cho thấy những gì nó đã mất tại các thời điểm khác nhau để chơi với tính năng này.
1) Lúc đầu, các chức năng mũi tên chỉ hoạt động trong Chrome Canary với
chrome://flags/#enable-javascript-harmonycờ được bật. Có vẻ như chức năng này ít nhất được thực hiện một phần bởi phiên bản 39.2) Sau đó, các hàm mũi tên có sẵn trong Google Chrome phía sau cờ JavaScript Harmony.
3) Và cuối cùng, trong Google Chrome 45 , các chức năng mũi tên được bật theo mặc định.
Bạn có thể mong đợi một mô hình tương tự sẽ xảy ra với các tính năng ECMAScript mới khác.
Chỉ cần sử dụng chế độ nghiêm ngặt , sử dụng chế độ đóng (không cần thiết, nhưng đó là một cách tiếp cận tuyệt vời) và Chrome sẽ có thể thực thi mã của bạn dưới dạng ES6 ...
(function(){
'use strict';
//your ES6 code...
})();Dưới đây là một ví dụ ... http://jsbin.com/tawubotama/edit?html,js,console,output cố gắng xóa dòng chế độ sử dụng và thử lại, một lỗi trên bảng điều khiển sẽ được ghi lại.
Kể từ tháng 11 năm 2015, Firefox và Edge đã dẫn đầu các cuộc đua ES6, hãy sử dụng chúng nếu bạn muốn thử nghiệm các chức năng mà Chrome thiếu. Edge có lớp / lớp con và Firefox có Proxy ; giữa chúng bạn có hầu như tất cả các tính năng ES6 .
Nếu bạn phải sử dụng ES6 trong bảng điều khiển Chrome, có một cách đơn giản, đã thử và đúng:
Kiên nhẫn.
Các trình duyệt đang áp dụng ES6 - ngay cả Safari, người đã kéo theo hầu hết các tiêu chuẩn HTML5. Hãy cho Google thời gian và họ sẽ triển khai từng tính năng ES6. Ví dụ, các chức năng mũi tên hiện có sẵn, trong kênh sản xuất và không có cờ.
Đừng mong đợi các tiện ích mở rộng; bạn không thể dịch ES6 sang ES5 theo từng dòng, vì vậy chúng tôi không thể mở rộng bảng điều khiển với Babel .
Đúng là có một cờ thử nghiệm js, nhưng nó tồn tại vì những lý do chính đáng. V8 có Proxy nhưng theo cú pháp cũ (không chuẩn) và có vấn đề bảo mật . Sự phá hủy của nó cũng không đầy đủ: bạn sẽ thấy rằng trong một số trường hợp nó hoạt động, trong những trường hợp đến thì không.
Nếu bạn chỉ muốn chơi ES6, chỉ cần chơi với Edge / Firefox. Cả hai đều bao gồm gần như toàn bộ Babel, có giao diện điều khiển và trình gỡ lỗi và có các tính năng mà Babel không thể cung cấp.