javascript - 如何通过 ES6 + Webpack 在浏览器中使用我的 Javascript 库?

标签 javascript gulp ecmascript-6 webpack

我正在 ES6 中创建一个库,我想从 HTML 中的脚本标记调用该库:

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

export default new CoolElement();
<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>

我使用 Webpack 和 Gulp 将其转换为 es5 并将其捆绑到 dist 文件夹中。但是当我在页面上需要它时,没有全局 CoolElement 引用。我怎样才能做到这一点..?

最佳答案

   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 在浏览器中使用我的 Javascript 库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34600169/

相关文章:

javascript - Gulp watch 卡在最后并显示正在开始任务

JavaScript 为什么 'this' 未正确绑定(bind)

javascript - 这个 "a: ?number = null;"是什么意思?

javascript - Gulp 指纹识别 + 生产部署

javascript - 为什么常数字段不 protected ?

JavaScript 无法创建多个输入

javascript - 编辑(附加?)存储在 jquery 变量中的字符串

javascript - 查找两个单独的 JavaScript 对象之间的重复值?

javascript - jQuery 插件无法正常工作

npm - 将参数从脚本传递给 gulp 任务