Javascript ES6/React包-尝试导入时未定义导出的类（使用webpack构建）？

我们创建了一个包，用于收集几个项目之间共享的React组件，但由于某些原因，当我们尝试导入包时，导出未定义。为了解决这个问题，我提供了一个调整后的

index.js

，它说明了这个问题（在实际场景中，类位于单独的文件中）：

运行

webpack

生成两个文件

lib/index.js

和

lib/index.js.map

：

Hash: 3a52a7d7bb440ee0c467
Version: webpack 3.2.0
Time: 2331ms
       Asset    Size  Chunks             Chunk Names
    index.js  158 kB       0  [emitted]  main
index.js.map  186 kB       0  [emitted]  main
  [18] ./src/index.js 3.33 kB {0} [built]
    + 36 hidden modules

在下游项目中，我们的组件包是npm安装的，然后在代码中我们有：

import MyComponents, {MyComponent1, MyComponent2} from 'my-components';

console.log('>>> MyComponents', MyComponents);
console.log('>>> MyComponent1', MyComponent1);
console.log('>>> MyComponent2', MyComponent2);

运行此命令时，我看到包中的console语句显示：

>>> MyComponents {}
>>> MyComponent1 undefined
>>> MyComponent2 undefined

我已经试着调试过了，并且看到了modules.exports确实接受了指定的值，但是很快就会丢失代码中发生的所有事情

有人能提出可能出现的问题以及如何解决这个问题吗

顺便说一句，我刚刚尝试用gulp构建这个，但我没有遇到这个问题，所以我怀疑我的网页设置有问题？主要版本：

• “巴别塔核心”：“^6.25.0”
• “巴别塔加载器”：“^7.1.1”
• “babel eslint”：“^7.2.3”
• “反应”：“^15.6.0”
• “网页包”：“^3.2.0”
• “babel-preset-es2015”：“^6.24.1”
• “巴别塔预设反应”：“^6.24.1”

---

默认的

libraryTarget

是

var

。尝试指定

umd

---

同时检查库

package.json中的
main
字段，指向
lib/index.js
默认
libraryTarget
为
var
。尝试指定
umd

同时检查库
package.json中的
main
字段，指向
lib/index.js
添加的
libraryTarget
，并将其设置为
umd
。行为没有改变。
package.json
中的
main
字段已经指向
lib/index.js
@AndreM您是否已将包发布到npm？所以我可以看看编译过的文件。顺便说一句，您可能希望通过在npm中指定
externals:{'react'：'commonjs react'}
从包中外部化
react
，但我在这里制作了一个最低版本：@AndreM Clean dist folder并再次运行webpack。我刚刚尝试了您的项目和简单的测试，比如
console.log（require（'../lib'））
logs
{MyComponent1:[Function:MyComponent1]，MyComponent2:[Function:MyComponent2]，default:[Function]}
请通过我在GitHub上的地址与我联系，以便我们讨论。不清楚您的意思，因为没有“dist”文件夹。添加了
libraryTarget
，并将其设置为
umd
。行为没有改变。
package.json
中的
main
字段已经指向
lib/index.js
@AndreM您是否已将包发布到npm？所以我可以看看编译过的文件。顺便说一句，您可能希望通过在npm中指定
externals:{'react'：'commonjs react'}
从包中外部化
react
，但我在这里制作了一个最低版本：@AndreM Clean dist folder并再次运行webpack。我刚刚尝试了您的项目和简单的测试，比如
console.log（require（'../lib'））
logs
{MyComponent1:[Function:MyComponent1]，MyComponent2:[Function:MyComponent2]，default:[Function]}
请通过我在GitHub上的地址与我联系，以便我们讨论。不清楚您的意思，因为没有“dist”文件夹。
import MyComponents, {MyComponent1, MyComponent2} from 'my-components';

console.log('>>> MyComponents', MyComponents);
console.log('>>> MyComponent1', MyComponent1);
console.log('>>> MyComponent2', MyComponent2);

>>> MyComponents {}
>>> MyComponent1 undefined
>>> MyComponent2 undefined