Beklenmedik Simge Aktarımı Alma

Projemde bazı ES6 kodunu çalıştırmaya çalışıyorum ama beklenmeyen bir jeton dışa aktarma hatası alıyorum.

export class MyClass {
  constructor() {
    console.log("es6");
  }
}

ES6 Modülü sözdizimini kullanıyorsunuz.

Bu, ortamınızın (örn. Node.js) ES6 Modülü sözdizimini desteklemesi gerektiği anlamına gelir.

NodeJS, ES6 module.exportsmodülü sözdizimini ( exportanahtar kelime) değil CommonJS Modülü sözdizimini ( ) kullanır .

Çözüm:

• babelES6'nızı bir commonjshedefe aktarmak için npm paketini kullanın

veya

• CommonJS sözdizimi ile refactor.

CommonJS sözdiziminin örnekleri şunlardır ( flaviocopes.com/commonjs/ adresinden ):

• exports.uppercase = str => str.toUpperCase()
• exports.a = 1

Bu hatayı alırsanız, javascript dosyasını html sayfanıza nasıl eklediğinizle de ilgili olabilir. Modülleri yüklerken, bu dosyaları açıkça bildirmeniz gerekir. İşte bir örnek:

//module.js:
function foo(){
   return "foo";
}

var bar = "bar";

export { foo, bar };

Komut dosyasını şu şekilde eklediğinizde:

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

Hatayı alacaksınız:

Yakalanmayan Sözdizimi Hatası: Beklenmeyen simge dışa aktarma

"Module" olarak ayarlanmış bir type özniteliğine sahip dosyayı eklemeniz gerekir:

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

Ve sonra beklendiği gibi çalışacak ve modülünüzü başka bir modüle almaya hazırsınız:

import { foo, bar } from  "./module.js";

console.log( foo() );
console.log( bar );

Benim görüşüm

İhracat

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

import { MyClass1, MyClass2 } from './myClass';

CommonJS Alternatifi

myClass.js

class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };

other.js

const { MyClass1, MyClass2 } = require('./myClass');

Varsayılanı Dışa Aktar

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

CommonJS Alternatifi

myClass.js

module.exports = class MyClass1 {
}

other.js

const MyClass = require('./myClass');

Bu yardımcı olur umarım

ES6'yı kullanmak için babel-preset-env

ve sizin .babelrc:

{
  "presets": ["@babel/preset-env"]
}

@ Babbari 7 numaralı babel uygulaması için cevap güncellendi.

Varsayılan JavaScript modülü dışa aktarmalarını kullanabildiğinizde şu anda Babel'i kullanmaya gerek yoktur (JS çok güçlü hale gelmiştir). Eğiticinin tamamını kontrol et

Message.js

module.exports = 'Hello world';

app.js

var msg = require('./Messages.js');

console.log(msg); // Hello World

Babel paketlerini yükleyin @babel/coreve @babel/presethangi doğrudan ES6 hedeflerini anlamıyor düğüm js gibi commonjs hedefe ES6 dönüştürür

npm install --save-dev @babel/core @babel/preset-env

Ardından .babelrc, projenizin kök dizininde adıyla bir yapılandırma dosyası oluşturmanız ve bu kodu buraya eklemeniz gerekir

{ "presets": ["@babel/preset-env"] }

Bunu gibi bir giriş noktası dosyası yaparak düzeltildi.

// index.js
require = require('esm')(module)
module.exports = require('./app.js')

ve içine aktardığım herhangi bir dosya app.js ve dışına aktardığımimports/exports şimdi çalıştı gibinode index.js

Not: app.jskullanırsa export default, require('./app.js').defaultgiriş noktası dosyası kullanılırken bu olur .

ES6 sözdizimini kullanmak düğümde çalışmaz, maalesef, derleyicinin dışa aktarma veya içe aktarma gibi sözdizimini anlamasını sağlamak için babil'e sahip olmanız gerekir.

npm install babel-cli --save

Şimdi bir .babelrc dosyası oluşturmamız gerekiyor, babelrc dosyasında, babil'i ES5'i derlerken önceden ayarlanmış olarak yüklediğimiz es2015 ön ayarını kullanacak şekilde ayarlayacağız.

Uygulamamızın kökünde bir .babelrc dosyası oluşturacağız. $ npm kurulum babel-preset-es2015 - kaydetme

Uygulamamızın kökünde bir .babelrc dosyası oluşturacağız.

{  "presets": ["es2015"] }

Umarım çalışır ... :)