webpack umd libと外部ファイル

Question

反応成分をumd libとしてパッケージ化したいと思います。

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    './lib/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'lib.js', 
    library: 'lib', 
    libraryTarget: 'umd' 
    }, 
    resolve: { 
    extensions: ['', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loaders: ['babel'], 
     exclude: /node_modules/ 
     } 
    ] 
    }, 
    externals: { 
    "react": "React" 
    } 
} 

そして私は、このように私の他のコンポーネントパッケージを必要とした後example.js

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import {lib} from "../dist/lib"; 

、コンポーネントのWebPACKの設定は上記

：以下

はWebPACKの私の設定です：

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    './examples/example' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    resolve: { 
    extensions: ['', '.js'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loaders: ['babel'], 
     exclude: /node_modules/ 
     } 
    ] 
    } 
} 

私はexample.jsファイルをコンパイルした後、それがエラーを示しています

Line 3: Did you mean "react"? 
    1 | (function webpackUniversalModuleDefinition(root, factory) { 
    2 | if(typeof exports === 'object' && typeof module === 'object') 
> 3 |  module.exports = factory(require("React")); 
    |         ^
    4 | else if(typeof define === 'function' && define.amd) 
    5 |  define(["React"], factory); 
    6 | else if(typeof exports === 'object') 

私はexternals: {react: "React"}を削除した後にエラーが、外観の設定、原因からで、それはうまくいくと思います。

関連する回答をいくつか検索しますが、修正できません。

誰にも分かりませんか？ありがとう。

Answer 1

回答が見つかりました！

理由はumdが異なる外部値（参照doc）を設定する必要があるためです。

外部反応を{react: React}と設定したので、webpackはReactという名前のパッケージを見つけようとします。

異なるモジュール定義で異なる値を設定する必要があります。

externals: { 
    "react": { 
    root: 'React', 
    commonjs2: 'react', 
    commonjs: 'react', 
    amd: 'react' 
    } 
} 

次に修正します。