web-dev-qa-db-ja.com

ES6のインポートに中括弧を使用するのはいつですか？

明らかなようですが、私はES6で単一のモジュールをインポートするために中括弧を使用する場合について少し混乱していました。たとえば、私が取り組んでいるReact-Nativeプロジェクトには、次のファイルとその内容があります。

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

TodoReducer.jsでは、中括弧なしでインポートする必要があります。

import initialState from './todoInitialState';

initialStateを中括弧で囲むと、次のコード行で次のエラーが発生します。

未定義のプロパティの仕事を読み取れません

export default function todos(state = initialState.todo, action) {
// ...
}

同様のエラーは中括弧のついた私のコンポーネントにも起こります。私が知っているように、複数のコンポーネント/モジュールをインポートするとき、明らかにそれらを中括弧で囲まなければならないので、単一のインポートのために中括弧を使うべきかどうか疑問に思いました。

編集する

here のSO投稿は私の質問に答えませんが、代わりにwhenを要求しています。 single のインポートには中括弧を使用する必要があります。または、ES6で単一のモジュールをインポートするために中括弧を使用してはいけません（中括弧が必要な単一インポートを見たので、これは明らかに当てはまりません）。

javascriptimportecmascript-6
579
TonyGW

これはデフォルトのインポートです。

// B.js
import A from './A'

Aがデフォルトのエクスポートを持っている場合にのみ機能します。

// A.js
export default 42

この場合、インポート時にどの名前を付けてもかまいません。

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

なぜならそれはAのdefault exportがどんなものでも解決するからです。

これは名前付きインポートはAです。

import { A } from './A'

Aが名前付きエクスポートはAを含む場合にのみ機能します。

export const A = 42

この場合、エクスポート名による特定のものをインポートしているため、名前が重要になります。

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

これらを機能させるには、Aに対応する名前付きエクスポートを追加します。

// A.js
export const A = 42
export const myA = 43
export const Something = 44

モジュールは1つのデフォルトのエクスポートしか持てませんが、あなたが望むのと同じだけ多くの名前付きエクスポート _（0、1、2、または多く）それらをまとめてインポートすることができます。

// B.js
import A, { myA, Something } from './A'

ここでは、デフォルトのエクスポートをAとしてインポートし、exportsという名前をそれぞれmyAおよびSomethingとします。

// A.js
export default 42
export const myA = 43
export const Something = 44

インポート時に、それらすべてに異なる名前を割り当てることもできます。

// B.js
import X, { myA as myX, Something as XSomething } from './A'

デフォルトのエクスポートは、通常モジュールから取得することを期待しているものすべてに使用される傾向があります。名前付きエクスポートは、便利なユーティリティに使用される傾向がありますが、必ずしも必要というわけではありません。ただし、エクスポート方法を選択するのはあなた次第です。たとえば、モジュールにはデフォルトのエクスポートがまったくない場合があります。

これは、デフォルトエクスポートと名前付きエクスポートの違いを説明した、ESモジュールの優れたガイドです。

1622
Dan Abramov

TL; DR ：デフォルト以外のエクスポートをインポートする場合は、中括弧が使用されます。

詳細については上記のDan Abramovsの回答を参照してください。

94
Daniel Schmidt

言及する価値があるimport ES6キーワードには、スター付き表記もあると思います。

enter image description here

コンソールログを作成しようとすると、Mix：

import * as Mix from "./A";
console.log(Mix);

あなたは得るでしょう：

enter image description here

ES6のインポートに中括弧を使用するのはいつですか？

あなたがモジュールから特定のコンポーネントだけを必要とするとき、括弧は金色です、それはwebpackのようなバンドラーのためのより小さいフットプリントを作ります。

58
prosti

上記のDan Abramovの回答は、 デフォルトのエクスポート および の名前付きエクスポート について説明したものです。

どちらを使う？

引用符David Herman ：ECMAScript 6は単一/デフォルトのエクスポートスタイルを好み、デフォルトのインポートに最も適した構文を提供します。名前付きエクスポートのインポートは、やや簡潔でない可能性があります。 

しかしTypeScriptではexportという名前がリファクタリングのために好まれています。たとえば、デフォルトでクラスをエクスポートして名前を変更した場合、クラス名はそのファイル内でのみ変更され、他の参照では変更されません。名前付きエクスポートクラス名はすべての参照で名前変更されます。 指定輸出は公益事業者にも好まれます。 

あなたが好むものは何でも使用してください。

追加

デフォルトのエクスポートは実際にはdefaultという名前の名前付きエクスポートなので、デフォルトのエクスポートは次のようにインポートできます。

import {default as Sample} from '../Sample.js';
33
Deepak Sharma

あなたがimportを単なるノードモジュール、オブジェクト、そして分解のためのシンタックスシュガーと考えるならば、私はそれがかなり直感的であると思います。

// bar.js
module = {};

module.exports = { 
  functionA: () => {},
  functionB: ()=> {}
};

 // really all that is is this:
 var module = { 
   exports: {
      functionA, functionB
   }
  };

// then, over in foo.js

// the whole exported object: 
var fump = require('./bar.js'); //= { functionA, functionB }
// or
import fump from './bar' // same thing, object functionA and functionB props


// just one prop of the object
var fump = require('./bar.js').functionA;

// same as this, right?
var fump = { functionA, functionB }.functionA;

// and if we use es6 destructuring: 
var { functionA } =  { functionA, functionB };
// we get same result

// so, in import syntax:
import { functionA } from './bar';
11
Brandon

通常、関数をエクスポートするときは{}を使う必要があります。

if you have export const x

あなたは import {x} from ''を使います

if you use export default const x

あなたはimport X from '' を使う必要があります 

2
jadlmir

importステートメントで中括弧を使用することを理解するには、まず、ES6で導入されたdestructingの概念を理解する必要があります

  1. オブジェクト破壊

    var bodyBuilder = {
  firstname: 'Kai',
  lastname: 'Greene',
  nickname: 'The Predator'
};

var {firstname, lastname} = bodyBuilder;
console.log(firstname, lastname); //Kai Greene

firstname = 'Morgan';
lastname = 'Aste';

console.log(firstname, lastname); // Morgan Aste

  2. 配列分割

    var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];

console.log(firstGame); // Gran Turismo

    リストマッチングを使う

      var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
  console.log(secondGame); // Burnout

    スプレッド演算子を使用する

    var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(firstGame);// Gran Turismo
console.log(rest);// ['Burnout', 'GTA'];

ES6では、複数のモジュールをエクスポートできます。次に、以下のようにオブジェクトのデストラクタリングを利用できます。

module.jsというモジュールがあるとしましょう。

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

エクスポートした関数をindex.jsにインポートします。

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

また、そのように異なる変数名を使用することもできます。

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');
1
theTypan

中括弧（{}）は名前付きバインディングをインポートするために使用され、その背後にある概念は代入代入です

Import文が例でどのように機能するかの簡単なデモンストレーションは、 JavaScriptインポートで '{}'を使用するのはいつですか？ の同様の質問に対する私自身の回答にあります。

0
Samuel J Mathew

要約ES6モジュール：

輸出：

2種類のエクスポートがあります。

  1. 指定輸出 
  2. デフォルトのエクスポート、モジュールあたり最大1

構文：

// Module A
export const importantData_1 = 1;
export const importantData_1 = 2;
export default function foo () {}

輸入：

エクスポートの種類（名前付きエクスポートまたはデフォルトエクスポート）は、インポート方法に影響します。

  1. 名前付きエクスポートでは、エクスポートされた宣言（つまり、変数、関数、またはクラス）として中括弧と正確な名前を使用する必要があります。
  2. デフォルトのエクスポートでは、名前を選ぶことができます。

構文：

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // for our named imports

// syntax single named import: 
// import { importantData_1 } 

// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';

興味のあるもの：

  1. 名前付きエクスポートには、エクスポートのマッチング名を含む中括弧内のコンマ区切りリストを使用してください。
  2. デフォルトのエクスポートには、中括弧を付けずに選択した名前を使用してください。

エイリアス：

名前付きインポートの名前を変更したい時はいつでもaliasesを通して可能です。このための構文は次のとおりです。

import { importantData_1 as myData } from './A';

importantData_1をインポートしましたが、識別子はimportantData_1ではなくmyDataです。

0
Willem van der Veen