ฉันกำลังมองหาวิธีเรียกใช้รหัส ECMAScript 6 ในคอนโซลของเบราว์เซอร์ของฉัน แต่เบราว์เซอร์ส่วนใหญ่ไม่รองรับฟังก์ชันการทำงานที่ฉันกำลังมองหา ตัวอย่างเช่น Firefox เป็นเบราว์เซอร์เดียวที่รองรับฟังก์ชั่นลูกศร
มีวิธี (ส่วนขยาย userscript ฯลฯ ) ฉันสามารถเรียกใช้คุณสมบัติเหล่านี้บน Chrome ได้หรือไม่
คำตอบ:
ใน Chrome ฟีเจอร์ ES6 ส่วนใหญ่จะซ่อนอยู่หลังธงที่เรียกว่า "ฟีเจอร์ทดลอง JavaScript" เยี่ยมชมchrome://flags/#enable-javascript-harmonyเปิดใช้ธงนี้รีสตาร์ท Chrome และคุณจะได้รับคุณสมบัติใหม่ ๆ
ฟังก์ชั่นลูกศรยังไม่ได้ใช้งานใน V8 / Chromeดังนั้นการตั้งค่าสถานะนี้จะไม่ "ปลดล็อค" ฟังก์ชั่นลูกศร
เนื่องจากฟังก์ชั่นลูกศรเป็นการเปลี่ยนแปลงทางไวยากรณ์จึงไม่สามารถสนับสนุนไวยากรณ์นี้ได้โดยไม่ต้องเปลี่ยนวิธีแยกวิเคราะห์ JavaScript หากคุณรักการพัฒนาใน ES6 คุณสามารถเขียนโค้ด ES6 และใช้คอมไพเลอร์ ES6-to-ES5 เพื่อสร้างรหัส JavaScript ที่เข้ากันได้กับเบราว์เซอร์ที่มีอยู่ (ทันสมัย) ทั้งหมด
ตัวอย่างเช่นดูhttps://github.com/google/traceur-compiler ขณะที่เขียนจะสนับสนุนทุกรูปแบบใหม่ที่มีคุณสมบัติของ ES6 เมื่อรวมกับธงที่กล่าวถึงด้านบนของคำตอบนี้คุณจะได้ใกล้เคียงกับผลลัพธ์ที่ต้องการ
หากคุณต้องการเรียกใช้ไวยากรณ์ ES6 โดยตรงจากคอนโซลคุณสามารถลองเขียนทับตัวประเมิน JavaScript ของคอนโซล (เช่นที่ตัวประมวลผล Traceur รันก่อนรันโค้ด) ถ้าคุณอยากทำสิ่งนี้ลองดูที่คำตอบนี้เพื่อเรียนรู้วิธีแก้ไขพฤติกรรมของเครื่องมือสำหรับนักพัฒนา
classไวยากรณ์ตัวอย่างเช่น
--enable-javascript-harmonyตั้งค่าสถานะ: /(?<!a)b/.test('ab')(และโยนข้อผิดพลาดถัดไปหากไม่ได้ตั้งค่าสถานะ: "Uncaught SyntaxError: นิพจน์ทั่วไปไม่ถูกต้อง: / (? <! a) b /: กลุ่มไม่ถูกต้อง")
ที่จอแจอึกทึกเป็น transpiler ที่ยอดเยี่ยมสำหรับทดลองใช้ ES6 คุณสามารถเรียกใช้ ES6 ในเบราว์เซอร์ในส่วน "ทดลองใช้" ของเว็บไซต์ มันทำงานคล้ายกับ jsfiddle
ลูกศรตัวอย่างเช่น:
let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);แสดงผลลัพธ์ 2แสดงผล
Babel "transpiles" ที่แปล ES6 เป็น ES5 จาวาสคริปต์ที่สามารถเรียกใช้งานได้โดยเทคโนโลยีเบราว์เซอร์ปัจจุบัน คุณสามารถติดตั้ง Babel npm install -g babelผ่าน เมื่อติดตั้งแล้วคุณสามารถบันทึกตัวอย่างลูกศรด้านบนลงในไฟล์ได้ สมมติว่าเราเรียกไฟล์ "ES6.js" สมมติว่าคุณติดตั้งโหนดแล้วที่บรรทัดคำสั่งไพพ์ไปยังโหนด:
babel ES6.js | node
2และคุณจะเห็นการส่งออก คุณสามารถบันทึกไฟล์ที่แปลอย่างถาวรด้วยคำสั่ง:
babel ES6.js --out-file output.js
output.js "transpiled":
"use strict";
var add = function (x, y) {
return x + y;
};
var result = add(1, 2);
console.log(result);หลักสูตรใดที่สามารถทำงานได้ในเบราว์เซอร์สมัยใหม่
ES6 เป็นเป้าหมายที่เคลื่อนที่เร็ว อ้างถึงตารางที่เข้ากันได้เพื่อค้นหาคุณสมบัติที่สนับสนุนโดย transpilers เช่น Traceur และ Babel และการสนับสนุนเบราว์เซอร์ คุณสามารถขยายแผนภูมิเพื่อดูการทดสอบที่ใช้ในการตรวจสอบความเข้ากันได้:
ในการทดลองใช้ Edge ES6 ในเบราว์เซอร์ให้ลองสร้าง Firefox ทุกค่ำคืนหรือปล่อย Chrome
sudo npm install -g --save-dev babel-cli babel-preset-es2015และ$(npm bin)/babel ES6.js --presets es2015ทำให้มันสำเร็จ rf: babeljs.io/docs/plugins/preset-es2015
คุณอาจกำลังมองหาหนึ่งในลิงค์ต่อไปนี้:
การใช้ Babel ในขั้นตอนการพัฒนาของคุณจะทำการ transpile (แปลง) JavaScript ของคุณให้ใช้งานข้ามเบราว์เซอร์ได้โดยอัตโนมัติ หรือถ้าคุณใช้ TypeScript คุณสามารถพักผ่อนได้ง่าย รหัสของคุณได้รับการ transpiled แล้ว
ไม่ต้องการตั้งค่า transpiler (เช่น Babel / Typescript) หรือคุณต้องการเล่นกับคุณสมบัติที่ transpiler ของคุณยังไม่รองรับ?
คุณสามารถเปิดใช้งานคุณลักษณะ ECMAScript แบบทดลองในเบราว์เซอร์ของคุณโดยไปที่chrome: // flags / # enable-javascript-harmonyและเปิดใช้งานการตั้งค่าสถานะ JavaScript Harmony สำหรับคุณลักษณะบางอย่างคุณอาจต้องใช้Chrome Canaryเมื่อเปิดใช้งานการตั้งค่าสถานะธง Harmony
ปกติแล้ว JavaScript API ใหม่จะไม่ครอบคลุมโดย Babel และจะมีการตั้งค่าสถานะ Chrome ของตนเอง
คำถามนี้กล่าวถึงโดยเฉพาะโดยใช้ฟังก์ชั่นลูกศร ขณะนี้ฟังก์ชั่น Arrow ได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมดยกเว้น IE และ Opera Mini ดูcaniuse caniuse
มันเคยเป็นเรื่องยากเล็กน้อยหากคุณต้องการเล่นด้วยฟังก์ชั่นลูกศร ประวัติด้านล่างแสดงสิ่งที่ใช้ในจุดต่าง ๆ ในเวลาที่เล่นกับคุณลักษณะนี้
1) ตอนแรกลูกฟังก์ชั่นการทำงานเฉพาะในChrome Canaryกับ
chrome://flags/#enable-javascript-harmonyธงที่เปิดใช้งาน ดูเหมือนว่าฟังก์ชันนี้มีการใช้งานอย่างน้อยบางส่วนโดยเวอร์ชัน 392) จากนั้นฟังก์ชั่นลูกศรที่ให้บริการในGoogle Chrome ด้านหลังธง JavaScript Harmony
3) และสุดท้ายในGoogle Chrome 45ลูกศรฟังก์ชั่นที่เปิดใช้งานโดยค่าเริ่มต้น
คุณสามารถคาดหวังรูปแบบที่คล้ายกันที่จะเกิดขึ้นกับคุณสมบัติ ECMAScript ใหม่อื่น ๆ
เพียงใช้โหมดเข้มงวดในการปิด (ไม่จำเป็น แต่เป็นวิธีการที่ยอดเยี่ยม) และ Chrome จะสามารถเรียกใช้โค้ดของคุณในฐานะ ES6 ...
(function(){
'use strict';
//your ES6 code...
})();นี่คือตัวอย่าง ... http://jsbin.com/tawubotama/edit?html,js,console,outputพยายามลบบรรทัดโหมดstric ที่ใช้แล้วลองอีกครั้งข้อผิดพลาดบนคอนโซลจะถูกบันทึกไว้
ตั้งแต่เดือน พ.ย. 2558 FirefoxและEdgeเป็นผู้นำการแข่งขัน ES6 ใช้มันหากคุณต้องการทดลองฟังก์ชั่นที่ Chrome ขาด ขอบมีระดับ / ประเภทรองและ Firefox มีพร็อกซี่ ; ระหว่างนั้นคุณมีคุณสมบัติ ES6เกือบทั้งหมดคุณสมบัติ
หากคุณต้องใช้ ES6 ในคอนโซล Chrome มีวิธีง่าย ๆ ที่ได้ลองและเป็นจริง:
ใจเย็น ๆ
เบราว์เซอร์กำลังใช้ ES6 - แม้แต่ Safari ที่ลากเท้าบนมาตรฐาน HTML5 เกือบทั้งหมด ให้เวลากับ Google และพวกเขาจะใช้คุณสมบัติ ES6 ทีละตัว ตัวอย่างเช่นฟังก์ชั่นลูกศรมีให้บริการแล้วในแชนแนลการผลิตและไม่มีแฟล็ก
อย่าคาดหวังว่าส่วนขยาย; คุณไม่สามารถแปล ES6 เป็น ES5 ทีละบรรทัดดังนั้นเราจึงไม่สามารถขยายคอนโซลด้วยBabelบาเบล
มันเป็นความจริงที่มีการตั้งค่าสถานะการทดสอบ js แต่มีอยู่ด้วยเหตุผลที่ดี V8 มีพร็อกซี แต่ในความเก่า (ที่ไม่ได้มาตรฐาน) ไวยากรณ์และมีปัญหาด้านความปลอดภัย การทำลายล้างนั้นไม่สมบูรณ์เช่นกัน: คุณจะพบว่าในบางกรณีก็ใช้งานได้
หากคุณต้องการเล่น ES6 เพียงเล่นกับ Edge / Firefox ทั้งสองครอบคลุมเกือบทั้งหมดของ Babel มีคอนโซลและดีบักเกอร์และมีคุณลักษณะที่ Babel ไม่สามารถให้ได้