ESMプロジェクトでnpmモジュールをインポートするにはどうすればよいですか？

Question

私はnpmモジュール（https://www.npmjs.com/package/squarebook）を持っています。これは、babelローダーでwebpackを使用してsrc/index.jsからdist/bundle.jsを生成しています。次に、私のpackage.jsonでメインファイルがindex.js

import browserify from 'gulp-browserify'; 
import babelify from 'babelify'; 

    gulp.task('build_js', function() { 
    return gulp.src('src/js/main.js') 
     .pipe(browserify({debug:true})) 
     .pipe(gulp.dest('dist/js/')); 
    }); 

：

module.exports = require('./dist/bundle'); 

今、私はバベルと、このように一気browserifyを使用しています他のプロジェクトでのNPMを経由して、そのモジュールを（NPM squarebookをインストール）がインストールされている：メインファイルには、次のコードを持っていることをディレクトリ）、

src/js/main.jsにあるこの他のプロジェクトの内容は次のとおりです。

​​3210

私はsquarebookパッケージから私のエクスポート関数としてゲストブックを使用できるように期待していますが、それはプロトとちょうど空のオブジェクトです。

私は何が間違っているのか、間違っていますか？

Answer 1

は作品に答える@Matthiskが、module.exportsはを使用して、輸出のデフォルトを維持することなく、解決策は、ライブラリのターゲット（libraryTarget：「UMD」）を指定することでした。このように私のパッケージのWebPACKの設定ファイルで：

module.exports = { 
    entry: { 
    'bundle': './src/index.js', 
    }, 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: '[name].js', 
    libraryTarget: 'umd' 
    } 

こと途中、私は私のES6プロジェクトで私のモジュールをインポートすることができたし、それがES5モジュールからも、この方法でインポート可能です：

var squarebook = require('squarebook').default; 

Answer 2

あなたのsquarebookパッケージで作成したindex.jsファイルは必要ありません。あなたのライブラリのメインファイルは、webpackによって生成された配布可能なファイルである可能性があります。配布可能なライブラリにコードを組み込む方法については、webpack docsをご覧ください。メインファイルもアプリケーションの通常のエントリーポイントになる可能性がありますが、その場合、ライブラリのユーザーは同じWebpackトランスフォーマーを使用するように強制します（ライブラリーでES6構文を使用する場合、Babel同じように）。

編集：

module.exports = squarebook; 

の代わりに使用して：あなたはこのようなあなたのインデックスモジュールからエクスポートする必要があり、直接

var squarebook = require('squarebook'); 

主な機能をインポートできるようにしたい場合は ES6 export default声明。 export defaultを使用してES5ファイルからインポートすると正しく機能しない理由を理解するには、es6console fiddleをご覧ください。