Tôi mới sử dụng ES6 (ECMAScript 6) và tôi muốn sử dụng hệ thống mô-đun của nó trong trình duyệt. Tôi đọc ES6 được hỗ trợ bởi Firefox và Chrome, nhưng tôi gặp lỗi sau khi sử dụngexport
Uncaught SyntaxError: Unexpected token import
Tôi có một tệp test.html
<html>
<script src="test.js"></script>
<body>
</body>
</html>
và một tệp test.js
'use strict';
class Test {
static hello() {
console.log("hello world");
}
}
export Test;
Tại sao?
<script type="module"></script>hãy chắc chắn rằng bạn thêm điều đó nếu không bạn sẽ gặp lỗi đó. Tôi đã đập đầu vào tường liên tục vì <script>import ... </script>cố ý rằng chrome hiện được cho là hỗ trợ mô-đun ES6 mà không có cờ, sau đó tôi nhận thấy rằng thuộc tính type cần thiết để chỉ định cho trình duyệt rằng đây là mô-đun ES6, nếu không có thì bạn sẽ có được chính xác lỗi.
Câu trả lời:
Nhiều trình duyệt hiện đại hiện hỗ trợ mô-đun ES6. Miễn là bạn nhập các tập lệnh của mình (bao gồm cả điểm nhập vào ứng dụng của bạn) bằng cách sử dụng <script type="module" src="...">nó sẽ hoạt động.
Hãy xem caniuse.com để biết thêm chi tiết: https://caniuse.com/#feat=es6-module
Bạn có thể dùng thử Mô-đun ES6 trong Google Chrome Beta (61) / Chrome Canary.
Tham khảo triển khai ToDo MVC của Paul Irish - https://paulirish.github.io/es-modules-todomvc/
Tôi đã demo cơ bản -
//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>
Hy vọng nó giúp!
<script type="module"></script>hãy chắc chắn rằng bạn thêm điều đó nếu không bạn sẽ gặp lỗi đó. Tôi đã đập đầu vào tường liên tục khi <script>import ... </script>cố ý rằng chrome hiện được cho là hỗ trợ mô-đun ES6 mà không có cờ, sau đó tôi nhận thấy rằng thuộc tính type cần thiết để chỉ định cho trình duyệt rằng đây là mô-đun ES6.
jsnguồn).
Thật không may, mô-đun không được nhiều trình duyệt hỗ trợ ngay bây giờ.
Tính năng này chỉ mới bắt đầu được triển khai trên các trình duyệt tại thời điểm này. Nó được triển khai trong nhiều trình chuyển đổi, chẳng hạn như TypeScript và Babel, và các trình gói như Rollup và Webpack.
Tìm thấy trên MDN
nó hoạt động để tôi thêmtype="module" vào tập lệnh importtrong mjs của tôi:
<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>
Xem bản demo: https://codepen.io/abernier/pen/wExQaa