Reactjs 网页包umd库和外部文件

我想将react组件打包为

umd

lib

以下是我的网页设置：

module.exports={
devtool:“eval”，
条目：[
“./lib/index”
],
输出：{
path:path.join（uu dirname，'dist'），
文件名：“lib.js”，
库：“lib”，
图书馆目标：“umd”
},
决心：{
扩展名：[''，.js']
},
模块：{
装载机：[
{
测试：/\.js$/,，
装载机：[“巴别塔”]，
排除：/node\u模块/
}
]
},
外部：{
“反应”：“反应”
}
}

然后在我以这种方式要求我的其他组件中的包之后

example.js

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“./dist/lib”导入{lib}；

上述组件的网页包设置为：

module.exports={
devtool:“eval”，
条目：[
“/示例/示例”
],
输出：{
path:path.join（uu dirname，'dist'），
文件名：“bundle.js”，
公共路径：'/static/'
},
决心：{
扩展名：[''，.js']
},
模块：{
装载机：[
{
测试：/\.js$/,，
装载机：[“巴别塔”]，
排除：/node\u模块/
}
]
}
}

编译

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设置，因为在我删除

externals:{react:“react”}

后，它会工作

我搜索了一些相关的答案，但无法修复

有人知道这件事吗？谢谢。

我找到了答案

原因是

umd

需要设置不同的外部值（参考）

因为我将外部react设置为

{react:react}

，所以webpack将尝试查找名为

react

的包

因此，您需要在不同的模块定义中设置不同的值

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

---

那就修好了

谢谢你发布这个！今天帮我省去了很多麻烦你用的是哪个版本的网页包？webpack2还能用吗？@BigDong我还没试过webpack2。在网页2上不起作用吗？谢谢你发布这个。我用Webpack4试过了，非常感谢！谢谢你，伙计！我搜索了3天，因为网页上的文档都是些垃圾，所以我没有看到任何帮助！