Question

我在ES6中创建了一个我想从HTML中的脚本标记调用的库：

＆＃13;

class CoolElement {
	constructor() {
      
    }
    init() {
      return document.createElement('div');
    }
}

export default new CoolElement();

＆＃13;

<html>
<body>
	<div id="content"></div>
	<script type="module" src="../dist/coolelement.js"></script>
	<script>
		var element = CoolElement.init(); //Error! CoolElement does not exist!
		document.getElementById('content').addChild(element);
	</script>
</body>
</html>

＆＃13;

我使用Gpack将Webpack转换为es5并将其捆绑到dist文件夹。但是当我在页面上要求它时，没有全局的CoolElement参考。我怎么能这样做？？

Answer 1

   entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js",
        library: "home"
    },

在webpack配置中添加库：“home”，然后

		var element = home.CoolElement.init();
		document.getElementById('content').addChild(element);

如何在浏览器中使用我的Javascript库和ES6 + Webpack？

1 个答案: