web-dev-qa-db-ja.com

WebpackとBabelが機能しないクラスのエクスポート

小さなライブラリ用に、WebpackとBabelを使用した非常にシンプルなセットアップがあります。

以前は、ES5バージョンのライブラリを生成するための次のアーキテクチャがありました。

module.exports.lib = (function () {
    /* private part of library here */

    return {
        ... /* public part of library here */
    }
})();

すべてがこのようにうまく機能しており、ライブラリー内にアロー関数などのいくつかのES6機能さえあり、すべてが機能しました。しかし、私はこの方法をES6クラスに変更することにしました。

export default class Library {

}

そして今、私がやろうとすると：

var library = new Library();

ライブラリが定義されていないことがわかりました。 Libraryを評価するだけでも未定義が返されます。

それで私がしたことは、ライブラリを使用するファイルをimport Library from 'libraryfile.js'を実行するES6ファイルに変換し、それが再び機能するようにすることでした。

ただし、出力ライブラリは以前のように<script>タグを使用して通常のES5から引き続き使用できるようにしたいのですが。これは可能ですか？

これが私のwebpack設定ファイルです：

module.exports = {
  entry: {
    pentagine: "./lib/pentagine.js",
    demos: ["./demos/helicopter_game/PlayState.js"]
  },

  output: {
    path: __dirname,
    filename: "./build/[name].js",
    libraryTarget: 'umd'
  },

  module: {
    loaders: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};
javascriptecmascript-6webpackbabeljs
10
David Gomes

デフォルトのエクスポートは、モジュールのdefaultプロパティに格納されます。ユーザーが知らなくてもライブラリにアクセスできるようにするには、webpackエントリファイルを次のように変更します。

module.exports = require('./libraryfile').default;

また、library: 'YourLibraryName' webpack.github.io/docs/configuration.html#output-libraryのとおり、webpack設定で。

11
Felix Kling