index.htmlをbabelと一緒に蒸散するには？

私はES6モジュールを備えたWebページを持っています。 https://babeljs.io/docs/setup/#installationのバベルのドキュメントに続いて、私は正常に./node_modules/.bin/babel js -d targetとjavascriptのフォルダをtranspileすることができますが、彼らはそこにどのHTMLをtranspileしていません。 index.htmlをどうやって翻訳できますか？同じ構文でそれを使用すると失敗します。NPM 3.10とindex.htmlをbabelと一緒に蒸散するには？

./node_modules/.bin/babel index.html -d index2.html 
SyntaxError: index.html: Unexpected token (1:0) 
> 1 | <!DOCTYPE html> 
    |^
    2 | <html> 
    3 | 
    4 | <head>

MWE

export default "Hello World";

<!DOCTYPE html> 
 
    <html> 
 
    <body> 
 
    <script type="module"> 
 
    import message from "./js/message.js"; 
 
    window.message = message; 
 
    </script> 
 
    <button onclick="alert(`Message: ${window.message}`);">Get Message</button> 
 
    </body> 
 
    </html>

私はバベル6.24.1を使用しています（バベルコア6.25.0） .10。私はこのMWEのためのモジュールが必要ないことを知っています、実際のページははるかに複雑です。

P .:私のワークフローを維持するために、未翻訳バージョンの開発を続けたいと思います。私はトランスビルドされたコードをプロダクション用に使用したいと思います。

出典

2017-06-29 Konrad Höffner

Babelはブラウザモジュールのサポートを実装していません。 – loganfsmyth

できません。

BabelはJavaScriptトランスパイライザであり、HTML、またはHTMLに埋め込まれたJavaScriptを処理しません。

外部のJavaScriptを使用するようにHTMLを書き換えます。組み込みのイベントハンドラー属性の代わりにaddEventListenerを使用してください。その後、BabelをJSファイルに適用します。

出典

2017-06-29 18:19:53 Quentin

問題は私のコードがモジュール内にあり、私のHTMLにモジュール構文を使わずにモジュールを含めることができないことです（申し訳ありませんが、この要件を追加するのを忘れてしまった：私はバーベルなしで開発し、また、私のJavaScriptに自分のHTML要素を知らせるのは悪いスタイルではないのですか？ –

index.htmlをbabelと一緒に蒸散するには？

答えて

関連する問題