Nhập ES2015 không hoạt động (ngay cả ở cấp cao nhất) trong Firefox

Question 1

Đây là các tệp mẫu của tôi:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js:

import Test from 't2.js';

t2.js:

export const Test = console.log("Hello world");

Khi tôi tải trang trong Firefox 46, nó trả về "Lỗi cú pháp: khai báo nhập có thể chỉ xuất hiện ở cấp cao nhất của mô-đun" - nhưng tôi không chắc ở đây có thể nhận được thêm bao nhiêu cấp cao nhất mà câu lệnh nhập có thể xuất hiện. Lỗi này có phải do cá trích đỏ không và có phải đơn giản là nhập / xuất chưa được hỗ trợ không?

Question 2

Trên thực tế, lỗi bạn gặp phải là do bạn cần phải tuyên bố rõ ràng rằng bạn đang tải một mô-đun - chỉ khi đó việc sử dụng các mô-đun mới được phép:

<script src="t1.js" type="module"></script>

Tôi đã tìm thấy nó trong tài liệu này về cách sử dụng ES6 import trong trình duyệt . Khuyến nghị đọc.

Được hỗ trợ đầy đủ trong các phiên bản trình duyệt đó (và mới hơn; danh sách đầy đủ trên caniuse.com ):

Firefox 60
Chrome (máy tính để bàn) 65
Chrome (android) 66
Safari 1.1

Trong các trình duyệt cũ hơn, bạn có thể cần bật một số cờ trong các trình duyệt:

Chrome Canary 60 - đằng sau cờ Nền tảng web thử nghiệm trong chrome:flags.
Firefox 54 - đang dom.moduleScripts.enabledcài đặt about:config.
Edge 15 - đằng sau cài đặt Tính năng JavaScript thử nghiệm trong about:flags.

Question 3

Điều này không còn chính xác nữa. Tất cả các trình duyệt hiện tại đều hỗ trợ mô-đun ES6

Câu trả lời gốc bên dưới

Kể từ importMDN :

Tính năng này không được triển khai trong bất kỳ trình duyệt nào 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ư Trình biên dịch Traceur, Babel hoặc Rollup.

Các trình duyệt không hỗ trợ import.

Đây là bảng hỗ trợ trình duyệt:

Nếu bạn muốn nhập các mô-đun ES6, tôi khuyên bạn nên sử dụng một trình vận chuyển (ví dụ: babel ).

Question 4

Chỉ sử dụng phần mở rộng tệp .js trong khi nhập tệp đã giải quyết được vấn đề tương tự (đừng quên đặt type="moduletrong thẻ tập lệnh).

Đơn giản chỉ cần viết:

import foo from 'foo.js';

thay vì

import foo from 'foo';

Question 5

Thêm type=modulecác tập lệnh nhập và xuất các mô-đun sẽ giải quyết vấn đề này.

Question 6

bạn phải chỉ định loại của nó trong tập lệnh và xuất phải là mặc định .. ví dụ trong trường hợp của bạn,

<script src='t1.js' type='module'>

cho t2.js sử dụng mặc định sau khi xuất như thế này, xuất mặc định 'biểu thức của bạn ở đây' (bạn không thể sử dụng biến ở đây) . bạn có thể sử dụng chức năng như thế này,

export default function print(){ return console.log('hello world');}

và để nhập, cú pháp nhập của bạn phải như thế này, nhập print từ './t2.js' (sử dụng phần mở rộng tệp và ./ cho cùng một thư mục) .. Tôi hy vọng điều này sẽ hữu ích cho bạn!

Question 7

Vì lợi ích của các lập luận...

Người ta có thể thêm một giao diện mô-đun tùy chỉnh vào đối tượng cửa sổ chung. Mặc dù, nó không được khuyến khích. Mặt khác, DOM đã bị hỏng và không có gì tồn tại. Tôi sử dụng điều này mọi lúc để tải chéo các mô-đun động và đăng ký trình nghe tùy chỉnh. Đây có lẽ không phải là một câu trả lời- nhưng nó hoạt động. Tràn ngăn xếp hiện có một module.export gọi một sự kiện có tên là 'Spork' - ít nhất là cho đến khi làm mới ...

//  spam the global window with a custom method with a private get/set-interface and     error handler... 

window.modules = function(){
  window.exports = {
    get(modName) {
      return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
    },
    set(type, modDeclaration){
      window.exports[type] = window.exports[type] || []
      window.exports[type].push(modDeclaration)

    }
  }

}

//  Call the method
window.modules()

//  assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))


// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')

// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))

//  Show and tell...
window