babel-standaloneが変換するスクリプトは、デフォルトでグローバルスコープで実行されるため、それらによって定義されたシンボルは他のすべてのモジュールで自動的に使用できます。その観点から、モジュールにインポート/エクスポート文は必要ありません。
しかし、babel-standalone(例:クイックテスト環境、機能デモンストレーションなど)とwebpackなどのバンドルツールの両方で使用できるソースファイルを維持しようとしている可能性があります。その場合、互換性のためにそこにインポートとエクスポートのステートメントを保持する必要があります。
グローバルスコープに余分なシンボルを追加すると、(通常はエラーが発生するのではなく)babelが効果を持たないようにインポートおよびエクスポートするコードが生成されます。たとえば、エクスポートステートメントは次のようなコードにコンパイルされます。
Object.defineProperty (exports, "__esModule", {
value: true
});
exports.default = MyDefaultExportedClass;
「エクスポート」という名前の既存のオブジェクトがない場合、これは失敗します。だから、それを1を与える:定義されます興味深いものがまだアクセス可能であるので、私はちょうどそれをwindow
オブジェクトのコピーを与える:
<script>
// this must run before any babel-compiled modules, so should probably
// be the first script in your page
window.exports = window;
import
文はrequire()
への呼び出しに変換されます。結果(またはそれから抽出されたプロパティ)は、importステートメントの識別子として使用される変数に割り当てられます。 require()
の結果には__esModule
というプロパティが含まれているかどうかによって異なる、デフォルトのインポートについてはちょっと複雑です。そうでない場合は、物事は簡単です(ただし、同じモジュールでデフォルトと名前付きの両方のエクスポートをサポートすることはできません。必要な場合は、babelが生成するコードを見て、それを作る方法を見つけてください作業)。
したがって、require()
の作業バージョンが必要です。私たちは、エクスポートされたシンボル/シンボルにモジュール名の静的な翻訳を与えることで、それを提供することができます。例えば、リアクトコンポーネントのデモページには、私は次の実装があります
function require (module) {
if (module === "react") return React;
if (module === "react-dom") return ReactDOM;
}
複数のシンボルを返すモジュールの場合は、あなただけのプロパティなどの記号を含むオブジェクトを返すと思います。大体、私たちが望むものである
`React = React;`
:
この方法で、
`import React from "react";`
のような文が効果的であるコードに変換します。
エラーは、「インポート」がクラスまたは関数にないファイルの最上位に表示されることを意味します。 –
他のコードを持たないjsファイルにインポート文があります。これは './modules/mymodule'のMymoduleをインポートするだけです。 – icode