2016-09-25 10 views
3

私の反応プロジェクトで私はしばらくの間、ES6モジュールを使用してきました。私は間違っていない場合は、これらの2つの全く異なることをやっている、ポリマーのモジュール

<script src="./myLib.js"></script> 

:私はスクリプトタグを使用して、私のポリマー成分で

import {f1,f2} from "./myLib"; 

:私のコンポーネントを反応させて、私はインポートを使用します。スクリプトタグは、アプリ全体のグローバル名前空間を汚染しています。輸入はされていません。

質問#1:私はこのことを正しく理解していますか?

質問#2:ポリマーに類似のものを得る方法はありますか?

私は数多くの異なるポリマー成分を持っています。インポートの競合するライブラリがあります。次に、複数のコンポーネントを使用するページがあると、JSスクリプトのどのバージョンを取得するかのように思えます。

答えて

0

ポリマーでES6モジュールを使用することもできます。まず、テンプレートとスクリプトを分割する必要があります。

<dom-module id="my-elem"></dom-module> 
<script src="my-elem.js"></script> 
  • ES6コードからHTMLをインポートするプラグインのいくつかの種類を使用してください:あなたは、両方の方法

    1. は要素のHTMLにtranspiled ES6コードを含むスクリプトタグを追加して行くことができます。これは、その後、難しい部分が、その後transpilingされ、例えば、SystemJS

      import './my-elem.html!'; 
      
      class MyElem extends HTMLElement {} 
      
      document.registerElement('my-elem', MyElem); 
      

    ため、このpluginで可能です。他のモジュールローダーについてはわかりませんが、JSPM + SystemJSを使用すると、ユニバーサルモジュールとしてバンドルするのは簡単です。この方法で、あなたの要素は<link rel="import" href="bower_components/my-elem/my-elem.html">と他のES6コードからのインポートの両方で使用可能になります。前者のケースでは、バンドルされていない依存関係はグローバルスコープ内に存在する必要があります。しかし、そのような依存関係をメインのhtmlファイルに置くことはできます。ちょうど他の多くの要素が公開されているように。

    JSPM + SystemJSをお試しいただきたい場合は、blog post on my blogをご覧ください。私はTypeScriptを使用していますが、ES6では一般的な解決策はほぼ同じでなければなりません。

  • 関連する問題