ES6 + javascript modülü dışa aktarma seçenekleri


82

ES6 modüllerinin kamuya dışa aktarımının aşağıdaki iki şekilde de yapıldığını gördüm:

// method 1
export var getAnswer = function () { return 'forty two'; };

// method 2
export default function () { return 'forty two'; };
  1. Bunların ikisi de geçerli mi?
  2. Öyleyse, neden ikisi de var?
  3. ES6 sözdizimi kullanılarak modül dışa aktarımı için başka geçerli seçenekler var mı?

Googlefu ile cevabı bulamadığıma şaşırdım. Ben endişe ediyorum sadece ES6 modülleri ile değil CommonJS, RequireJS, AMD, Düğüm, vb


2
Sanırım fark import x from yvsimport {x} from y
elclanrs

Yanıtlar:


180

Bir yıl ve bir süre sonra, işte konuyla ilgili bulduğum en iyi bilgiler.

4 tür ihracat vardır. Her birinin kullanım örnekleri ve bunları kullanan bazı içe aktarmalar şunlardır:

Sözdizimini Dışa Aktar

// default exports
export default 42;
export default {};
export default [];
export default (1 + 2);
export default foo;
export default function () {}
export default class {}
export default function foo () {}
export default class foo {}

// variables exports
export var foo = 1;
export var foo = function () {};
export var bar;
export let foo = 2;
export let bar;
export const foo = 3;
export function foo () {}
export class foo {}

// named exports
export {};
export {foo};
export {foo, bar};
export {foo as bar};
export {foo as default};
export {foo as default, bar};

// exports from
export * from "foo";
export {} from "foo";
export {foo} from "foo";
export {foo, bar} from "foo";
export {foo as bar} from "foo";
export {foo as default} from "foo";
export {foo as default, bar} from "foo";
export {default} from "foo";
export {default as foo} from "foo";

Sözdizimini İçe Aktar

// default imports
import foo from "foo";
import {default as foo} from "foo";

// named imports
import {} from "foo";
import {bar} from "foo";
import {bar, baz} from "foo";
import {bar as baz} from "foo";
import {bar as baz, xyz} from "foo";

// glob imports
import * as foo from "foo";

// mixing imports
import foo, {baz as xyz} from "foo";
import foo, * as bar from "foo";

// just import
import "foo";

Kaynak.


9
Harika liste, ancak her bir türün ne yaptığını ve farklarının ne olduğunu açıklayabilir misiniz?
Dan Dascalescu

2
Bu harika bir fikir. Her açıklamayla kapsamlı olmak istiyorum ama ES6'ya bir süredir dokunmadım bu yüzden biraz paslandım. Neden bahsettiğimden emin olabilmem için ES6 alanına dönene kadar beklemesi gerekecek.
kdbanman

sen en
iyisisin

40

Bunların ikisi de geçerlidir.

Yöntem 1, adlandırılmış dışa aktarmalar sağlar . Buradaki anahtar, birden fazla şeyi dışa aktarabilmenizdir. Bu, birden çok özelliğe sahip bir nesneyi dışa aktarmak yerine kullanılmalıdır. Adlandırılmış dışa aktarmalara sahip bir modülü içe aktardığınızda, kullanın import {a, b} from c.

Yöntem 2 , varsayılan dışa aktarımı sağlar . Yalnızca bir varsayılan dışa aktarma olabilir. Bu, öncelikle herhangi bir ek destek olmadan kullanılmasını beklediğiniz classa veya tek bir şey gibi tek bir şeyi dışa aktarırken functionkullanılır. Varsayılan dışa aktarım ile bir modülü içe aktardığınızda, kullanın import d from c.

Her ikisini de kullanabileceğinizi unutmayın! bu nedenle, eğer bir avuç ara sıra kullanılan yardımcı ile büyük, birincil bir göreviniz varsa export, yardımcılar ve export defaultbirincil olabilir. Bir modülü içe aktardığınızda ve her iki tür dışa aktarmaya ihtiyacınız olduğunda kullanın import d, {a, b} from c.

Bir diğer seçenek, bu nedenle gibi senin modülün sonunda listeleyerek ihracatını adlandırılmış alabilirsiniz olmasıdır: export {a,b,c}. Ayrıca onları yeniden adlandırabilirsiniz export {a as $a, b as c}.

Bunların hepsini bulabildiğim güncel es6 modülü bilgileri için en iyi kaynak olan bu makaleden aldım .


3
  1. Bunların ikisi de geçerli mi?

Hayır, export function () { return answer; };geçersizdir, ya varsayılanı kullanırsınız ya da bu işlev bildirimine bir ad eklersiniz.

  1. Öyleyse, neden ikisi de var?

Yapmazlar :)

  1. ES6 sözdizimi kullanılarak modül dışa aktarımı için başka geçerli seçenekler var mı?

Burada birçok geçerli seçenek görebilirsiniz: https://github.com/eslint/espree/pull/43

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.