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

И выше настройки веб-пакета компонента:

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 нужно установить другое внешнее значение (справочный документ).

Потому что я установил внешнюю реакцию как {react: React}Webpack будет пытаться найти пакет с именем React,

Таким образом, вам нужно установить другое значение в другом определении модуля.

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

Тогда это исправить!