タグ付けされた質問 「es6-modules」

ECMAScript 6（2015）で導入されたJavaScriptの標準モジュールシステム。

1
JavaScriptでデフォルトのインポートにエイリアスを設定するにはどうすればよいですか？
ES6モジュールを使用すると、名前付きインポートにエイリアスを付けることができます import { foo as bar } from 'my-module'; そして、私はデフォルトのインポートをインポートできることを知っています import defaultMember from 'my-module'; デフォルトのインポートにエイリアスを付けたいのですが、次のようにするとうまくいきました import defaultMember as alias from 'my-module'; しかし、その結果、構文解析（構文）エラーが発生します。 デフォルトのインポートにエイリアスを設定するにはどうすればよいですか？
1
NodeJSは、インポート/エクスポートes6（es2015）モジュールのサポートを計画しています
私はこれについて明確な答えがないままインターネット全体を調べてきました。 現在、NodeJSはCommonJS構文のみを使用してモジュールをロードしています。標準のES2015モジュール構文を本当に使用したい場合は、事前にトランスパイルするか、実行時に外部モジュールローダーを使用する必要があります。 現在、私はこれらの2つの方法のいずれかを使用するのにあまり前向きではありません。NodeJSのメンテナはES2015モジュールをサポートする計画を立てているのでしょうか？これについてのヒントはまったく見つかりませんでした。 現在、NodeJS 6.xはES2015の機能の96％をサポートしていると主張していますが、モジュールへの参照はありません（NodeJS ES2105サポートリンク）。 NodeJSがすぐにこれらのモジュールをすぐにサポートするかどうか知っていますか？
13
ワイルドカードを使用して、ディレクトリ内のすべてのファイルからモジュールをインポートすることは可能ですか？
ES6では、次のようにファイルからいくつかのエクスポートをインポートできます。 import {ThingA, ThingB, ThingC} from 'lib/things'; ただし、ファイルごとに1つのモジュールを持つ構成が好きです。私は次のようなインポートになります： import ThingA from 'lib/things/ThingA'; import ThingB from 'lib/things/ThingB'; import ThingC from 'lib/things/ThingC'; 私はこれができるようになりたいです： import {ThingA, ThingB, ThingC} from 'lib/things/*'; または同様のもの。各ファイルにはデフォルトのエクスポートが1つ含まれ、各モジュールにはそのファイルと同じ名前が付けられていることが理解されています。 これは可能ですか？
6
ES6の `export const`と` export default`の比較
私はこれらの2つの間に大きな違いがあるかどうかを判断しようとしexport defaultています。 import myItem from 'myItem'; そしてexport const私ができることを使用して： import { myItem } from 'myItem'; これ以外の違いやユースケースはあるのでしょうか。
1
ES6で「厳密な使用」を使用することはお勧めしませんか？
ECMAScript 6にはまだ慣れていません。アプリケーションコードにES6を使用するReact Starter Kitリポジトリのクローンを作成しました。リンターがディレクティブの発生を禁止するように構成されていることを知って驚きましたuse strict。これは、ES6より前のJavaScriptで推奨されていたものだと思いました。それで、ポイントは何ですか？
4
「…モジュール以外のエンティティに解決され、この構成を使用してインポートできない」とはどういう意味ですか？
TypeScriptファイルがいくつかあります。 MyClass.ts class MyClass { constructor() { } } export = MyClass; MyFunc.ts function fn() { return 0; } export = fn; MyConsumer.ts import * as MC from './MyClass'; import * as fn from './MyFunc'; fn(); これは使用しようとするとエラーになります new モジュール「MyClass」は非モジュールエンティティに解決され、この構成を使用してインポートすることはできません。 そして電話しようとすると fn() 型に呼び出し署名がない式を呼び出すことはできません。 何ができますか？
6
ES2015のインポートはFirefoxでは（トップレベルでも）機能しません
これらは私のサンプルファイルです： <!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"); Firefox 46でページをロードすると、「SyntaxError：インポート宣言はモジュールのトップレベルにのみ表示される可能性があります」と返されますが、インポートステートメントがここでどれだけトップレベルを取得できるかはわかりません。このエラーは赤いニシンですか、インポート/エクスポートはまだサポートされていませんか？
4
ブラウザのES6モジュール：Uncaught SyntaxError：予期しないトークンのインポート
私はへの新たなんだES6（ECMAScriptの6）、と私はその使用したいモジュールシステムをブラウザに。ES6はFirefoxとChromeでサポートされていると読みましたが、次のエラーが発生します。export Uncaught SyntaxError: Unexpected token import test.htmlファイルがあります <html> <script src="test.js"></script> <body> </body> </html> およびtest.jsファイル 'use strict'; class Test { static hello() { console.log("hello world"); } } export Test; どうして？
4
--harmony_modulesオプションを指定したノードv6.0.0でES2015「インポート」が機能しない
ノードv6.0.0を使用していて、ES2016（ES6）を使用したいと考えています。しかし、「インポート」構文が機能していないことに気づきました。ES2015でモジュラーコードを書くための基本は「インポート」ではありませんか？--harmony_modulesオプションを指定してノードを実行しようとしましたが、「インポート」について同じエラーが発生しました。これがコードです。 「インポート」なしの作業コード： 'use strict'; let sum = 0; class Number { addNumber(num1, num2) { return num1 + num2; } } let numberObj = new Number(); sum = numberObj.addNumber(1,2); console.log("sum of two number 1 and 2 "+ sum); 「インポート」で機能しないコード： server.js 'use strict'; import Number from "./Number"; let sum = 0; let …
2
1つのNPMパッケージから複数のES6モジュールをエクスポートする方法
私は、1つのファイルに含まれる約5つの異なるES6クラスで構成される比較的小さなNPMパッケージを作成しました。それらはすべて次のように見えます。 export default class MyClass { // ... } 次に、パッケージのエントリポイントを次のように設定しました。 export { default as MyClass } from './my-class.js'; export { default as MyOtherClass } from './my-other-class.js'; 次に、エントリポイントをwebpackとbabelを介して実行し、最終的には変換されて縮小されたindex.jsを生成します。 パッケージのインストールとインポートは正常に機能しますが、クライアントコードから以下を実行すると、 import { MyClass } from 'my-package'; "MyClass"をインポートするだけでなく、すべてのクラスのすべての依存関係を含むファイル全体をインポートします（私のクラスの一部には大きな依存関係があります）。 すでにバンドルされているパッケージの一部をインポートしようとすると、webpackがどのように機能するかわかりましたか？したがって、私はnode_modules/my-packagebabelも実行するようにローカルのWebpack構成をセットアップしてから、次のことを試しました。 import { MyClass } from 'my-package/src/index.js'; ただし、これでもindex.jsによってエクスポートされたすべてのクラスがインポートされます。私が望むように機能しているように見える唯一のことは、私がそうするならば： import MyClass from 'my-package/src/my-class.js'; しかし、私はむしろむしろ： 変換され縮小されたファイルをインポートできるため、node_modules内でbabelを実行するようにwebpackに指示する必要がありません。 各ファイルへのパスを入力する代わりに、エントリポイントから個々のクラスを直接インポートできる …
5
共有コンポーネントライブラリのベストプラクティス
共有可能なReactコンポーネントライブラリを作成しています。 ライブラリには多くのコンポーネントが含まれていますが、エンドユーザーはそれらのいくつかを使用するだけで済みます。 コードをWebpack（またはParcelまたはRollup）にバンドルすると、すべてのコードを含む1つのファイルが作成されます。 パフォーマンス上の理由から、実際に使用されない限り、すべてのコードをブラウザでダウンロードしたくありません。コンポーネントをバンドルするべきではないと私は思いますか？バンドルはコンポーネントの消費者に任せるべきですか？コンポーネントの消費者に他に何かを残しますか？JSXをトランスパイルするだけですか？ 同じリポジトリに多数の異なるコンポーネントが含まれている場合、main.jsには何を含める必要がありますか？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.