2017-05-09 18 views
2

モジュールを作成するためにインポートとエクスポートを使用しようとしていますが、機能しません。Babel.jsでインポートとエクスポートが機能しない

index.htmlヘッダーにhttps://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.jsを追加し、jsファイルをインポートしようとしましたが、SyntaxErrorというエラーメッセージが表示されました。インポート宣言は、モジュールのトップレベルにしか表示されません。私はおそらく何が間違っていますか?

私はrequire.jsを使用できますが、むしろインポートとエクスポートを使用することができます。

HTML

script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script 

JSファイルは

import Mymodule from './modules/mymodule'; 
+0

エラーは、「インポート」がクラスまたは関数にないファイルの最上位に表示されることを意味します。 –

+0

他のコードを持たないjsファイルにインポート文があります。これは './modules/mymodule'のMymoduleをインポートするだけです。 – icode

答えて

3

バベルは、モジュールのクライアント側のtranspilingを行うことができない、あるいはむしろそれは普遍のブラウザでサポートされていません。実際、プラグインを使用しない限り、Babelはimportrequire()に変換します。

私は、次のコードを実行した場合:

Uncaught ReferenceError: require is not defined

Babel Docsから:

Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side. See setup build systems for more information.

ほとんどの人は、プリコンパイルされたモジュールのバンドラを選択し、私は次のエラーを取得する

<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
    <script defer type="text/babel" data-presets="es2015"> 
     import Mymod from './modules/module'; 
     Mymod(); 
    </script> 
</head> 

WebpackまたはRollupのようになります。

このクライアント側を実際に実行する場合は、で実行するBabelでRequireJSを使用してください。ただし、AMD構文を使用する必要があります。

ES6モジュールのネイティブブラウザのサポートは、まだearly stagesです。しかし、私の知る限りでは、Babelがimport/export文を変換しないように指示するプリセット/プラグインはありません。

0

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";` 

のような文が効果的であるコードに変換します。

関連する問題