ライブラリの書き出しを正しくWebpackするには？

Question

webpackを使った最初の本当の試み、私は再利用可能なライブラリを作成しようとしています。私は私のライブラリクラスを正しくエクスポートする方法を理解できません。ここでは、私が現在やっていることの概要を説明し、ビルドされたものをどのように使用しようとしているのですか？

私はそうのようなエントリポイントがあります。

import {ClassA} from './libs/library.js'; // currently using chrome flags for testing 

しかし、私は理解することはできません。私は自分のアプリケーションで必要なときに私のクラスをインポートするために構築されたライブラリを使用したい

import ClassA from './classA'; 
import ClassB from './classB'; 

export {ClassA, ClassB}; 

を私のwebpackビルドのための正しい '出力'設定を出してください。

{ 
    "presets": [[ 
    "env", { 
     "targets": { 
     "browsers": "last 2 versions" 
     } 
    } 
    ]] 
} 

とのWebPACKの設定のように：私のような.babelrcでバベル-ENVを使用してい

const path = require('path'); 

export default() => ({ 
    entry: __dirname + '/src/index.js', 
    output: { 
     path: path.resolve(__dirname, './libs'), 
     filename: 'library.js', 
     libraryTarget: 'umd', 
     library: '' 
    }, 
    externals: {}, 
    module: { 
     rules: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      use: { 
       loader: "babel-loader" 
      } 
     },{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      use: { 
       loader: "eslint-loader" 
      } 
     }] 
    }, 
    resolve: { 
     modules: [path.resolve('./node_modules'), path.resolve('./src')], 
     extensions: ['.json', '.js'] 
    } 
}); 

しかし、先に示したインポートを経由して、私のクラスを使用しようとすると、私が取得しますエラー：

Uncaught SyntaxError: The requested module does not provide an export named 'ClassA'

誰かが私が間違っていると思っていますか？私はちょうどwebpackのオプションの正しい設定が欠けていると確信していますが、Googleの時間は助けていません。

Answer 1

これを解決するために、Webpackには長年のfeature requestがあるようです。

一方で、あなたはグローバルスコープに変数を追加する必要があり、単純なimport './classA'を行うことができるかもしれませんが（これはlibraryTarget: 'umd'オプションのデフォルトの動作です）