Systemjsバンドルグローバルインポートコンフィグ

Question

私はTypescript、ES6モジュール構文、SystemJS/builderを使用しています。

私がやろうとしている基本的な要件は次のとおりです。

• はES6モジュールのインポート構文（例えばimport * as _ from 'lodash'）使用@typesパッケージ（グローバルNPMは、同様のインストール用）
• を使用してtypescriptですコード補完を有効にします
• ビルダーは、ビルドからグローバルを除外して、dev/productionのCDN URLを使用して正しくインポートします。

私はちょうどそれを取得していくために、ビルドおよびDEV /生産ENVのために使用しています：configと

System.config({ 
    meta: { 
    "lodash": { 
     "format": "global", 
     "build": false, 
     "exports": "_" 
    } 
    // ...more meta 
    }, 
    map: { 
    "lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js", 
    // ...more maps 
    } 
}); 

ここからは私がES6にtranspilesしてから、すべてを束ねるNPMタスクを持っていますbabelプラグインを使用して1つのファイルに変換します。スクリプトは、本番ページに直接ロードされ、ロードされます。問題は、かつて私が原因私は変更に成功してきた

{default: _ } //_ is the actual lodash export

のようなオブジェクトとCDNの輸入を包むsystemjsになど「_.cloneは関数ではありません」などのエラーを得続けるグローバルな依存関係の輸入でありますインポートはimport _ from 'lodash' になりますが、lodash（角度のような他のグローバルスクリプトも）がデフォルト値をエクスポートせず、コード補完を失うため、IDEエラーが発生します。

ここでsystemjs/builderの要件を満たす正しい方法はありますか？

サイドノートとして、それがうまくいくなら、systemjs CDNの代わりにスクリプトタグの読み込みを使っても問題ありません。

Answer 1

このシナリオでは、TypeScriptにフラグ--allowSyntheticDefaultImportsがあります。具体的には、それは、後のステップで別の蒸散器、ローダー、またはバンドラーがmodule.exports〜exports.defaultのマップを提供していることを型チェッカーに通知します。

あなたはモジュール形式が"system"に設定されている場合、このフラグが暗黙的に設定されていることを

{ "compilerOptions": { "target": "esnext", "module": "es2015", "allowSyntheticDefaultImports": true, "moduleResolution": "node", "baseUrl": "." } 

tsconfig.json注コンパイラオプションの下で、このフラグを指定することができます。

今、あなたは

import _ from "lodash"; 

を書くことができますし、活字体は、それを理解し、それをです。TypeCheck、それが正しく使用されていることを検証します。ただし、これは型検査にのみ影響します。この場合、実行時合成を提供するローダーまたは中間のトランスパイライラーがまだ必要です。

import * as _ from "lodash"; 

が提案NodeJS違反 - > ESMの相互運用の提案をして、あなたが_([1, 2]).map(x => x ** 2)のようにそれを呼び出す場合も呼び出し可能であることから、モジュールの名前空間オブジェクトを禁じESの仕様に違反するので、あなたはを利用するためによくやっています。 --allowSyntheticDefaultImportsフラグとSystemJSが提供する相互運用機能