transpiled ES6コード

Question

ソースコードはES6で書かれており、バベルとのWebPACKを使用して、ES5するtranspiledさからのインポートに空のオブジェクトを取得し、それは次のようになります。

のsrc/2.js

export default { 
    ... 
} 

のsrc/1.js

import 2 from './2.js' 
export default { 
    ... 
} 

1.js WebPACKのためのメインエントリスクリプトです。ここでのWebPACKの設定があります：

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    'entry': './src/1.js', 
    'module': { 
    'loaders': [{ 
     'test': /\.js$/, 
     'exclude': /node_modules/, 
     'loader': 'react-hot-loader/webpack' 
    }, { 
     'test': /\.js$/, 
     'exclude': /node_modules/, 
     'loader': 'babel-loader' 
    }] 
    }, 
    'output': { 
    'path': path.resolve(__dirname, './dist'), 
    'publicPath': '/', 
    'filename': 'index.js' 
    } 
} 

ES5 transpiledファイルindex.jsは、その後NPMモジュールとして公開され、 'example_module' を言います。

は今、私は別のアプリで：モジュールをインポートしようとしたとき

import exampleModule from `example-module`; 
console.log(exampleModule) // <-- empty object 

私は空のオブジェクトを取得します。

翻訳されたファイルは、ネイティブのES5環境のスクリプトタグ内で使用され、ES6コードではインポートできないことを理解しているようです。

質問は、モジュールをES5環境とES6環境の両方で使用できるようにビルドプロセスを調整するにはどうすればよいですか。

Answer 1

import exampleModule from 'example-module';different-appプロジェクトのnode_modules/フォルダでは、デフォルトで表示されます。別の絶対的なフォルダからexample-moduleを取得するためのWebPACKを伝えるために

1. 使用のWebPACKとaliases：

   は、次の2つの可能性があります。

2. node_modulesフォルダーにお気に入りのパッケージマネージャー（yarn/npm）を添付してexample-moduleにリンクしてください。

私は個人的にオプション＃2に行きます。