WebpackでES6クラスをバンドルする。拡張クラスを持ち上げる方法はありますか？

Question

Webpack拡張クラスを巻き上げることはできますか？

私は、WebpackとBabelを使用して、それぞれ別々のファイルからクラスを束ね、トランシルすることができます。

import classA from './a'; 
import classB from './b'; 
import classC from './c'; 
import classD from './d'; 
... 

a.js：

export class classA extends classD { 
    constructor(...) { 
     super(...); 
    } 
} 

マイWebPACKのエントリファイルは、

index.js名前順すべてのクラスのimport文を含むindex.jsファイルです私の問題はクラスが名前順にインポートされていることです。したがって、classAの後にclassDが宣言され、javascriptのhoistinのためにプログラムが中断されます。 g /初期化ルール。

Webpackがクラスをソートして必要な順番に並べる方法があるのですか？それとも手動で並べ替えるのが唯一の選択ですか？

Answer 1

Webpackは、すべてのインポートを1つのファイルにまとめるだけではなく、モジュールとして保持します。すべてのモジュール/ファイルはそれが依存するすべてのものをインポートする必要があるため、Node内でモジュールを実行するだけで動作します（必要に応じて変換後）。 classDが定義されていないため、a.jsは単独で動作しません。

import ClassD from './d'; 

export default class ClassA extends ClassD { 
    constructor(...) { 
    super(...); 
    } 
} 

import x from './file'がxとしてデフォルトのエクスポートをインポートし、ので、あなたのクラスのためexport defaultを使用したい：正しい方法はa.jsでそれをインポートすることです。

複数の場所からファイルをインポートする際に複数回それが含まれていると心配するかもしれませんが、そうではありません。これは一度含まれており、そのモジュールのすべてのインポートはバンドル内の同じものを参照します。

注：JavaScriptの規約では、クラスにはPascalCaseを使用しています。