2016-05-16 8 views
7

最新のJavaScriptライブラリの多くは、モノリスからモジュール化されたnpmパッケージに更新されています。いくつかの例はlodashd3です。ES6のインポートをマージまたはネストすることはできますか?

これは、ビルドサイズを小さくするという点では優れていますが、インポート時に少しぎこちなくなります。ライブラリ全体をロードするとき、私は書く:

import d3 from 'd3'; 

let csv = d3.csv()... 
let xScale = d3.scale()... 

個々のモジュールの代わりに、パッケージ全体をロードするとき、私は書く:

import d3_scale from 'd3-scale'; 
import d3_request from 'd3-request'; 

let csv = d3_request.csv()... 
let xScale = d3.scale.scaleLinear()... 

ことは私が私ので、私の輸入をマージすることが可能になる構文があります各パッケージのすべての関数呼び出しを1つのオブジェクトから外すことができます(例:d3.csv()d3.scaleLinear())。

+0

これらはすべて同じオブジェクト上にあることで得られることはありますか?独立したものを別々にすることが重要です。 – loganfsmyth

+0

「*書く必要がありますか?」あなたはパッケージ全体をインポートすることができます – Amit

+0

私は私の質問で説明したように@Amit、それは大きなパッケージだから 'd3'をすべてインポートしたくないので、サブセットをインポートするだけでビルドサイズを抑えることができます。 – ericsoco

答えて

5

私が質問を書いていたとき、私は答えを見つけ出しました。自己ゴムダッキング。

spread operatorは、ここではかなりまともに見える:

import * as d3_request from 'd3-request'; 
import * as d3_scale from 'd3-scale'; 
const d3 = { 
    ...d3_request, 
    ...d3_scale 
}; 

d3.csv('path/to.csv', (error, data) => { 
    let xScale = d3.scale()... 
}); 
+0

これをより良い形式にすることは可能ですか?二重スラッシュは何ですか? – Ringo

+4

'const d3 = Object.assign({}、d3_request、d3_scale)'です。 ES6では、スプレッドはイテラブルのためのものであり、オブジェクトはそれらのものではありません。 [オブジェクトスプレッド](https://github.com/sebmarkbage/ecmascript-rest-spread)はステージ2の提案です。 – estus

+0

@estusそれは大丈夫です、私はES6固有の答えを探していない、私は私のビルドパイプライン(Babel.js)で動作する答えを探しています。だからES7のオプションが私のために働く。しかし、別の答えとしてそれを書くことを自由に感じてください、私はupvoteします。 – ericsoco

2

もう一つの方法は、ファイルD3-modules.jsを作成し、この

ようにそれを行うことです。

export * from 'd3-request'; 
export * from 'd3-scale'; 

[インポートをその必要なファイル:

import * as d3 from "./d3-modules.js"; 

これは実際にd3が自分自身でやっていることです:https://github.com/d3/d3/blob/635d44786dd4322d0c89dd98546bff91d7cce0fe/index.js

関連する問題