Webpack创作库使用TypeError导入错误：xxx不是构造函数

Question

我无法将我编写的（并发布到npm）的javascript包导入到新项目中。

我创建了一个ES6包，并使用 int intval = ammount * currentprice; if(portfoliolist == null) portfoliolist = new ArrayList(); // i added this line portfoliolist.add(new PortfolioItem(addName, ammount, intval, 0, 0, 0)); 将其捆绑在一起。在包中，我可以使用脚本标记

使用捆绑文件导入库

webpack

然后像这样新上课：

<script src='../dist/awesome-table-dist.js'></script>

像魅力一样！ awesome-table

我把包推到了npm，现在我想把它带进一个像这样的新项目：

let awesomeTable = new AwesomeTable.AwesomeTable('record');

然后

import AwesomeTable from '@iannazzi/awesome-table'

错误： let awesomeTable = new AwesomeTable('record');

既然我正在将它导入到一个新项目中，我已经尝试了各种新的方法，但似乎完全卡住了。

我可以通过再次包含脚本来使用该包，但显然我想导入所以我可以重新打包： TypeError: _iannazzi_awesome_table__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor

以下是该软件包的webpack配置：

<script src='node_modules/@iannazzi/awesome-table/dist/awesome-table-dist.js'></script>

Answer 1

首先，您需要公开您的lib，您可以通过定义library＆amp; libraryTarget: 'umd'属性。

其次，不建议将lib作为捆绑发布。想想那个场景，你的lib由几个部分组成，但并非所有部分都是强制性的。当您运送lib一个捆绑包时，您强制用户下载多余的额外代码。

今天的最佳做法是通过Babel将您的代码转换为兼容es5和commonjs作为模块系统。 最近，有一种趋势是将es6模块发布到一个单独的文件夹中，这样每当您的用户使用支持tree-shaking的软件包时，他们就可以使用它。