javascript - 使用 Webpack 和 ES6 的项目中出现奇怪的错误
问题描述
我不是 webpack 的专家,请帮助我理解错误是什么。我需要以这种方式附加一个事件处理程序,我不明白我做错了什么。这位同事写了这个 webpack config,我对 webpack 还是不熟悉。
class Store {
constructor(storeParams) {
this.products = storeParams.products;
this.container = document.querySelector('.js-goods');
}
renderProducts() {
const productTemplate = document.querySelector('.js-goods-temp');
for (let i = 0; i < this.products.length; i++) {
const item = productTemplate.content.cloneNode(true);
const id = this.products[i].id;
const titleElem = item.querySelector('.js-title');
const descrElem = item.querySelector('.js-info');
const imageElem = item.querySelector('.js-img');
const priceElem = item.querySelector('.js-price');
const btnAddElem = item.querySelector('.js-add');
titleElem.innerHTML = this.products[i].title;
descrElem.innerHTML = this.products[i].descr;
imageElem.src = this.products[i].image;
priceElem.innerHTML = this.products[i].price;
btnAddElem.setAttribute('data-id', id);
this.container.appendChild(item);
btnAddElem.addEventListener('click', function () {
console.log(this.products[i].id) // When I try to hang an event handler this way, an error is output to the console - see below
})
}
}
}
goods-item.js:1 未捕获错误:模块构建失败(来自 ./node_modules/babel-loader/lib/index.js):TypeError: G:\firststep\store\src\components\goods-item\goods-item .js: path.inShadow 不是 NodePath._call (G:\ firststep\store\node_modules@babel\traverse\lib\path\context.js:53:20) 在 NodePath.call (G:\firststep\store\node_modules@babel\traverse\lib\path\context.js:40: 17) 在 NodePath.visit (G:\firststep\store\node_modules@babel\traverse\lib\path\context.js:88:12) 在 TraversalContext.visitQueue (G:\firststep\store\node_modules@babel\traverse\ lib\context.js:112:16) 在 TraversalContext.visitMultiple (G:\firststep\store\node_modules@babel\traverse\lib\context.js:79:17) 在 TraversalContext.visit (G:\firststep\store\node_modules@babel\traverse\lib\context.js:138:19) 在 Function.traverse.node (G:\firststep\store\node_modules@babel\traverse\lib\index.js:80:17 ) 在 NodePath.visit (G:\firststep\store\node_modules@babel\traverse\lib\path\context.js:95:18) 在 TraversalContext.visitQueue (G:\firststep\store\node_modules@babel\traverse\lib \context.js:112:16) 在 TraversalContext.visitSingle (G:\firststep\store\node_modules@babel\traverse\lib\context.js:84:19) 在 TraversalContext.visit (G:\firststep\store\node_modules @babel\traverse\lib\context.js:140:19) 在 Function.traverse.node (G:\firststep\store\node_modules@babel\traverse\lib\index.js:80:17) 在 NodePath.visit ( G:\firststep\store\node_modules@babel\traverse\lib\path\context.js:95:18) 在 TraversalContext.visitQueue (G:\firststep\store\node_modules@babel\traverse\lib\context.js:112 :16) 在 TraversalContext.visitMultiple (G:\firststep\store\node_modules@babel\traverse\lib\context.js:79:17) 在 eval (webpack:///./src/components/goods-item/goods- item.js?:1:7) 在 Object../src/components/goods-item/goods-item.js (http://localhost:9000/js/app.min.js:96:1 ) 在webpack_require ( http://localhost:9000/js/app.min.js:20:30 ) 在 eval (webpack:// /./src/static/js/index.js?:3:18) 在 Object../src/static/js/index.js ( http://localhost:9000/js/app.min.js:108 :1 ) 在webpack_require ( http://localhost:9000/js/app.min.js:20:30 ) 在http://localhost:9000/js/app.min.js:84:18 在http:// /localhost:9000/js/app.min.js:87:10
解决方案
@babel/preset-env
解决了问题 -改为设置另一个预设babel-preset-env
,
感谢@loganfsmyth 的建议
推荐阅读
- php - 打开所需文件失败?
- r - 在组合条形图中保留缺失列的位置
- firebase - 如何避免拾取已经存在的数据库节点--Recyclerview Items
- gnuplot - gnuplot qt:超链接和点击事件
- javascript - React:当用户开始输入时删除默认值
- php - 具有多个配置的多个生产环境
- mysql - 无法在子查询中删除 WHERE
- amazon-web-services - AWS > 负载均衡器 + Cloudfront - 最好的方法是什么
- python - pip install Pygame 后导入 Pygame 时出现 ModuleNotFoundError
- javascript - 具有动态键的对象的访问键名