lib webpack umd và các tệp bên ngoài

Question

Tôi muốn đóng gói thành phần phản ứng của mình dưới dạng một lib umd.

dưới đây là webpack thiết lập của tôi:

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

Và rồi sau khi tôi yêu cầu các gói trong phần khác của tôi theo cách này

example.js

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

Và trên thiết lập webpack thành phần là:

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

Sau khi tôi biên dịch tập tin example.js, nó hiển thị lỗi:

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

Tôi nghĩ rằng lỗi là từ các thiết lập externals, nguyên nhân sau khi tôi loại bỏ externals: {react: "React"}, nó hoạt động.

Tôi tìm kiếm một số câu trả lời có liên quan nhưng không thể khắc phục được.

Có ai có ý tưởng gì về điều này không? cảm ơn.

Answer 1

Tôi đã tìm thấy câu trả lời!

Lý do là umd cần đặt giá trị bên ngoài khác (tham chiếu doc).

Vì tôi đặt phản ứng bên ngoài là {react: React}, webpack sẽ tìm cách tìm gói có tên React.

Vì vậy, bạn cần đặt giá trị khác trong định nghĩa mô-đun khác nhau.

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

Sau đó, sửa chữa!