webpack umd lib und externe Dateien

Question

Ich möchte meine Reaktionskomponente als umd lib verpacken.

unten ist webpack meine Einstellung:

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" 
    } 
} 

Und dann, nachdem ich benötigen das Paket in meiner anderen Komponente auf diese Weise

example.js

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

Und vor Komponente webpack Einstellung ist:

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/ 
     } 
    ] 
    } 
} 

Nachdem ich die example.js Datei zu kompilieren, den Fehler zeigt:

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') 

Ich denke, der Fehler von der Einstellung Äußerlichkeiten ist, Ursache, nachdem ich externals: {react: "React"} entfernen, es funktioniert.

Ich suche einige verwandte Antworten, aber kann es nicht beheben.

Hat jemand eine Idee davon? Vielen Dank.

Answer 1

Ich fand die Antwort!

Der Grund ist umd müssen die verschiedenen externen Wert (Referenz doc).

Da ich die externe Reaktion als {react: React} eingestellt habe, würde Webpack versuchen, ein Paket mit dem Namen React zu finden.

Sie müssen also den unterschiedlichen Wert in verschiedenen Moduldefinitionen festlegen.

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

Dann ist es zu reparieren!