94

Bunlar benim örnek dosyalarım:

<!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");

Sayfayı Firefox 46'da yüklediğimde, "SyntaxError: içe aktarma bildirimleri yalnızca bir modülün üst düzeyinde görünebilir" - ancak içe aktarma ifadesinin buraya ne kadar üst düzeyden ulaşabileceğinden emin değilim. Bu hata bir kırmızı ringa balığı mı ve ithalat / ihracat henüz desteklenmiyor mu?

— Christoph Burschka
kaynak

2

ES6 modülleri henüz tarayıcılarda desteklenmemektedir.

— Felix Kling

2

Doğru değil Felix. 2016'da bile değil. 'Tüm' tarayıcılar tarafından desteklenmemesi daha doğru olur.

— Andrew S

133

Aslında aldığınız hata, bir modülü yüklediğinizi açıkça belirtmeniz gerektiğiydi - ancak o zaman modüllerin kullanımına izin verilir:

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

ES6 içe aktarmayı tarayıcıda kullanmakla ilgili bu belgede buldum . Önerilen Kaynaklar.

Bu tarayıcı sürümlerinde (ve daha sonra; caniuse.com'da tam liste ) tam olarak desteklenir :

Firefox 60
Chrome (masaüstü) 65
Chrome (android) 66
Safari 1.1

Eski tarayıcılarda, tarayıcılarda bazı işaretleri etkinleştirmeniz gerekebilir:

Chrome Canary 60 - Deneysel Web Platformu bayrağının arkasında chrome:flags.
Firefox 54 - dom.moduleScripts.enabledayarını about:config.
Edge 15 - Deneysel JavaScript Özellikleri ayarının arkasında about:flags.

— Tomáš Zato - Monica'yı eski durumuna döndür
kaynak

1

Teşekkürler; bu yeni bir bilgi gibi görünüyor (önceki yanıtlayıcının tarayıcı destek tablosunu developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ile karşılaştırın ), bu nedenle importartık desteklenmeyen yanıtınıza geçiyorum.

— Christoph Burschka

1

artık edge 16299 ve chrome 64'te herhangi bir işaret / ayar olmadan çalışıyor. Bir uyarı dosyaya değil yolu içe aktarmalı, bu nedenle t1.js'de: import Test from './t2.js';

— Catweazle

@Catweazle Olduğundan './t2.js've './t2'onsuz olmadığından emin misin .js?

— fredoverflow

@fredoverflow Evet, Node.js'den farklı olarak tam ad belirtilmelidir.

— Tomáš Zato - Monica'yı eski durumuna getir

tam bir örneğe ihtiyacı var, sadece içe

— aktarmaya

14

Bu artık doğru değil. Mevcut tüm tarayıcılar artık ES6 modüllerini destekliyor

Aşağıdaki orijinal cevap

Gönderen importMDN'yi üzerinde :

Bu özellik şu anda herhangi bir tarayıcıda yerel olarak uygulanmamaktadır. Traceur Compiler, Babel veya Rollup gibi birçok aktarıcıda uygulanmaktadır.

Tarayıcılar desteklemiyor import.

Tarayıcı destek tablosu şu şekildedir:

ES6 modüllerini içe aktarmak istiyorsanız, bir aktarıcı (örneğin babel ) kullanmanızı öneririm .

— Josh Beam
kaynak

Bu özellikleri bir bayrak kullanarak (örneğin, kromda) açabilir misiniz?

— evolutionxbox

4

@evolutionxbox: Özellikler engellenmemişse , işaret de yoktur.

— Bergi

1

Özellikler uygulanmadıysa, neden sözdizimi hatası veya bunların uygulanmadığını söyleyen bir hata almıyorum? Bu anlamlı değil.

— Tomáš Zato - Monica'yı yeniden etkinleştir

@ TomášZato, yalnızca kullandığınız tarayıcıya göre değişir

— Josh Beam

1

Aslında kodumda bir hata vardı ve gayet iyi çalışıyor. Cevabınızın neden yükseltildiğinden emin değilim. İçe aktarımı desteklemeyen tarayıcılar bunu bildiriyor. Söz konusu olan gibi hatalar, ithalatı kullanan gerçek hatalardır.

— Tomáš Zato - Monica'yı eski durumuna getir

2

Dosyaları içe aktarırken .js dosya uzantısını kullanmak aynı sorunu çözdü (ayarlamayı unutmayın. type="module komut dosyası etiketinde ).

Basitçe yazın:

import foo from 'foo.js';

onun yerine

import foo from 'foo';

— krmld
kaynak

1

Ekle type=modulehangi ithalat komut üzerine ve bu sorunu çözecek modülleri ihracat.

— Abhishek Khatri
kaynak

0

tipini komut dosyasında belirtmeniz ve dışa aktarmanın varsayılan olması gerekir .. sizin durumunuzda olması gerektiği gibi,

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

t2.js için bu şekilde dışa aktarmadan sonra varsayılanı kullanın, dışa aktarma varsayılanı 'burada ifadeniz gider' (burada değişken kullanamazsınız) . bunun gibi işlevi kullanabilirsiniz,

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

ve içe aktarma için, içe aktarma sözdiziminiz şu şekilde olmalıdır , './t2.js'den yazdırmayı içe aktarın (aynı dizin için dosya uzantısı ve ./ kullanın) .. Umarım bu sizin için yararlı olur!

— SK Biswas
kaynak

0

Tartışma uğruna...

Global pencere nesnesine özel bir modül arayüzü eklenebilir. Yine de tavsiye edilmez. Öte yandan, DOM zaten bozuk ve hiçbir şey devam etmiyor. Bunu her zaman dinamik modülleri çapraz yüklemek ve özel dinleyicilere abone olmak için kullanıyorum. Bu muhtemelen bir cevap değil ama işe yarıyor. Yığın taşması artık 'Spork' adlı bir olayı çağıran bir module.export'a sahip - en azından yenilenene kadar ...

//  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

— Paul Fabing
kaynak

Firefox'ta ES2015 içe aktarma çalışmıyor (en üst düzeyde bile)

Aşağıdaki orijinal cevap