browserifyとbabelifyでES6 node_modulesをどのように変換する必要がありますか？

Question

プロジェクトでES6構文を使用するために、gulp、browserify、babelifyを使用しています。 'import' and 'export' may appear only with 'sourceType: module'

babelify's github pageで提案されている解決策を読んだことがあります。これは、ES6で書かれたnode_moduleをインポートするとエラーになります。要するに、二つの可能性があります：browserifyはbabelifyですべてのファイルを変換（および不要なため無視し、オプションを追加しようとするように

1. は、影響を受けたnode_moduleのpackage.json
2. 設定の一気にbrowserifyオプションを追加します。ファイル）。

最初のオプションは、他の人が自分のプロジェクトをクローンしてすぐに起動して実行できないようにします。おそらくnpm postinstallスクリプトを使用して回避策がありますか？

第2のオプションは、過剰なもののようです。これにはより洗練されたソリューションがありますか？

Answer 1

Babelifyには、正規表現と一致しないファイルを飛ばしてしまうのを避けるために使用できるonlyオプションがあります。 Browserifyのglobalオプション（既定では、node_modulesディレクトリ内のファイルには変換が適用されません）と組み合わせると、node_modules内のファイルを選択的にトランスパイライズすることができます。この構成例では

：彼らはの一つである場合を除きnode_modules内

browserify({ entries: ["index.js"] }) 
    .transform("babelify", { 
    global: true, 
    only: /^(?:.*\/node_modules\/(?:a|b)\/|(?!.*\/node_modules\/)).*$/, 
    presets: ["es2015"] 
    }) 
    .bundle() 
    .pipe(fs.createWriteStream("bundle.js")); 

ファイルではないがコンパイルされません。

• /node_modules/a
• /node_modules/b

あなたの場合1つだけのディレクトリを持つ

/^(?:.*\/node_modules\/a\/|(?!.*\/node_modules\/)).*$/ 

、あなたがより多くを持っている場合、あなたはそれらを追加することができます：あなたはtranspiled、あなたが正規表現を簡略化することができますしたいnode_modulesをDER

/^(?:.*\/node_modules\/(?:a|b|c|d)\/|(?!.*\/node_modules\/)).*$/