ES6 モジュールは引き続きこの方法で使用できることがわかりました。 （カンニングペーパー）

これは、さまざまなエクスポート方法と、対応するインポート方法を示すチートシートです。実際には、名前、デフォルト値、リストの 3 つのタイプに分けることができます。

// 命名导入/导出 
export const name = 'value'
import { name } from '...'

// 默认导出/导入
export default 'value'
import anyName from '...'

// 重命名导入/导出 
export { name as newName }
import { newName } from '...'

// 命名 + 默认 | Import All
export const name = 'value'
export default 'value'
import * as anyName from '...'

// 导出列表 + 重命名
export {
  name1,
  name2 as newName2
}
import {
  name1 as newName1,
  newName2
} from '...'

次に、一つずつ見ていきましょう??

名前付け方法

ここで重要なのは、名前を付けることです。

export const name = 'value';

import { name } from 'some-path/file';

console.log(name); // 'value'

デフォルトのメソッド

デフォルトのエクスポートを使用し、名前は必要ないため、任意の名前を付けることができます

export default 'value'

import anyName from 'some-path/file'

console.log(anyName) // 'value'

デフォルトのメソッドは変数名を使用しません

export default const name = 'value';  
// 不要试图给我起个名字！

名前付けメソッドとデフォルト メソッドを一緒に使用します

ネーミング メソッドと デフォルト メソッドを同じファイル内で一緒に使用できますか??

eport const name = 'value'
eport default 'value'

import anyName, { name } from 'some-path/file'

リストのエクスポート

3 番目の方法は、リスト (複数) をエクスポートすることです

const name1 = 'value1'
const name2 = 'value2'

export {
  name1,
  name2
}

import {name1, name2 } from 'some-path/file'

console.log(
  name1,  // 'value1' 
  name2,  // 'value2' 
)

注意すべき重要な点は、これらのリストはオブジェクトではないということです。物体のように見えますが、そうではありません。私も初めてこのモジュールを受講したときにこの混乱を感じました。真実は、これはオブジェクトではなく、エクスポートのリストです。

// Export list ≠ Object
export {
  name: 'name'
}

エクスポートの名前を変更しました

エクスポート名に満足できませんか?大きな問題ではありませんが、as キーワードを使用して名前を変更できます。

const name = 'value'

export {
  name as newName
}

import { newName } from 'some-path/file'

console.log(newName); // 'value'

// 原始名称不可访问
console.log(name); // ? undefined

エクスポート リストでインライン エクスポートを使用することはできません

export const name = 'value'

// 你已经在导出 name ，请勿再导出我
export {
  name
}

インポートの名前を変更

同じルールがインポートにも適用され、as## を使用できます。 #キーワードにより名前が変更されます。

const name1 = 'value1'
const name2 = 'value2'

export {
  name1,
  name2 as newName2
}

すべてインポート

export const name = 'value'

export default 'defaultValue'

import * as anyName from 'some-path/file'

console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultValue'

命名方法とデフォルトの方法

デフォルトを使用すべきかどうかについては、多くの議論がありました。輸出。この 2 つの記事をご覧ください。

#JavaScript モジュールからのデフォルトのエクスポートを停止した理由
GitLab RFC (Thomas Randolph 著)
何でもそうですが、正解も不正解もありません。正しい方法は、あなたとあなたのチームにとって常に最善の方法です。

デフォルトのエクスポートで名前が付けられた非開発用語

友人にお金を借りているとします。あなたの友人は、現金または電子送金でお金を返済できると言いました。 EFT による支払いは、取引にあなたの名前が付けられるため、

named export

と同じです。つまり、あなたの友人が物忘れが激しく、お金を受け取っていないと言ってあなたにお金を返してほしいと要求し始めた場合です。ここでは、支払いにあなたの名前が記載されているため、送金証明書を提示するだけで済みます。ただし、友人に現金で返済した場合 (デフォルト エクスポート など)、証拠はありません。当時の100元は小紅から出たものだと言える。現金には名前がないため、あなたまたは他の誰かであることがわかります それでは、電子送金 (

名前付きエクスポート

) と現金 (デフォルトのエクスポート#) を使用する方がよいでしょうか。 ##)? それはあなたがその友人を信頼できるかどうかにかかっています??、実際には、これはこのジレンマを解決する正しい方法ではありません。より良い解決策は、友情を危険にさらす危険を避けるために、あなたの関係をそのような立場に置かず、お互いに正直になることです。はい、この考え方は、named export

または

default export の選択にも当てはまります。結局のところ、どちらの方法がチームに優しいかを決めるのはチーム次第です。どちらの方法を選択しても、結局のところ、あなたは一人で戦っているのではなく、グループで戦っているのです??英語原文アドレス: https://puppet.com/docs/puppet/latest/cheatsheet_module.html

著者: Samantha Ming

プログラミング関連の知識の詳細については、次のサイトを参照してください:

プログラミング入門

! ！

以上がES6 モジュールは引き続きこの方法で使用できることがわかりました。 （カンニングペーパー）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。