ฉันเพิ่งเริ่มใช้ES6 (ECMAScript 6) และฉันต้องการใช้ระบบโมดูลในเบราว์เซอร์ ฉันอ่าน ES6 ได้รับการสนับสนุนโดย Firefox และ Chrome แต่ฉันได้รับข้อผิดพลาดต่อไปนี้โดยใช้export
Uncaught SyntaxError: Unexpected token import
ฉันมีไฟล์ test.html
<html>
<script src="test.js"></script>
<body>
</body>
</html>
และไฟล์ test.js
'use strict';
class Test {
static hello() {
console.log("hello world");
}
}
export Test;
ทำไม?
<script type="module"></script>ตรวจสอบให้แน่ใจว่าคุณเพิ่มไม่เช่นนั้นคุณจะได้รับข้อผิดพลาดนั้น ฉันทุบหัวของฉันบนผนังอย่างต่อเนื่อง<script>import ... </script>โดยรู้ว่าโครเมี่ยมได้รับการกล่าวว่ารองรับโมดูล ES6 โดยไม่มีแฟล็กจากนั้นฉันสังเกตเห็นว่าจำเป็นต้องใช้แอตทริบิวต์ประเภทเพื่อระบุให้เบราว์เซอร์ว่านี่คือโมดูล ES6 โดยที่คุณไม่ได้รับสิ่งนั้น ข้อผิดพลาด
คำตอบ:
ตอนนี้เบราว์เซอร์สมัยใหม่จำนวนมากรองรับโมดูล ES6 ตราบเท่าที่คุณนำเข้าสคริปต์ของคุณ (รวมถึงจุดเข้าสู่แอปพลิเคชันของคุณ) โดยใช้สคริปต์<script type="module" src="...">นี้
ดูรายละเอียดเพิ่มเติมได้ที่caniuse.com : https://caniuse.com/#feat=es6-module
คุณสามารถทดลองใช้โมดูล ES6 ใน Google Chrome Beta (61) / Chrome Canary
การอ้างอิงการใช้งาน ToDo MVC โดย Paul Irish - https://paulirish.github.io/es-modules-todomvc/
ฉันสาธิตขั้นพื้นฐาน -
//app.js
import {sum} from './calc.js'
console.log(sum(2,3));
//calc.js
let sum = (a,b) => { return a + b; }
export {sum};
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>ES6</h1>
<script src="app.js" type="module"></script>
</body>
</html>
หวังว่าจะช่วยได้!
<script type="module"></script>ต้องแน่ใจว่าคุณเพิ่มเข้าไปไม่เช่นนั้นคุณจะได้รับข้อผิดพลาดนั้น ฉันทุบหัวของฉันบนผนังอย่างต่อเนื่อง<script>import ... </script>โดยรู้ดีว่าตอนนี้โครเมี่ยมได้รับการกล่าวว่ารองรับโมดูล ES6 โดยไม่มีแฟล็กจากนั้นฉันสังเกตเห็นว่าจำเป็นต้องใช้แอตทริบิวต์ประเภทเพื่อระบุให้เบราว์เซอร์ว่านี่คือโมดูล ES6
jsแหล่ง)
ขออภัยเบราว์เซอร์หลายโมดูลไม่รองรับโมดูลในขณะนี้
คุณลักษณะนี้เพิ่งเริ่มใช้งานได้ในเบราว์เซอร์ในขณะนี้ มีการนำไปใช้ในทรานส์ไพเลอร์หลายตัวเช่น TypeScript และ Babel และบันเดิลเลอร์เช่น Rollup และ Webpack
พบในMDN
มันใช้งานได้สำหรับฉันที่เพิ่มtype="module"เข้าไปในสคริปต์ในimportmjs ของฉัน:
<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'
console.log(module.default()) // Prints: Hi from the default export!
</script>
ดูการสาธิต: https://codepen.io/abernier/pen/wExQaa