简体   繁体   English

React NPM 包(Dragula)可用于开发但不能用于生产

[英]React NPM package(Dragula) works in development but not in production

I've built a nice drag'n Drop with React 15 and Dragula 3.7.2 but when i bundle my Application for Production the whole dnd thing doesn't work except i'm able to lift up a single Element but can't find a container to drop it in.我已经用 React 15 和 Dragula 3.7.2 构建了一个不错的拖放,但是当我捆绑我的生产应用程序时,整个 dnd 事情不起作用,除非我能够提起单个元素但找不到将其放入的容器。

I'm assigning my containers with a reference to my drake instance which i currently create in componentDidMount.我正在为我的容器分配对我当前在 componentDidMount 中创建的 drake 实例的引用。

I've assigned multiple EventListener to the drake instance, but the only one which is firing is the 'drag'-eventListener.我已将多个 EventListener 分配给 drake 实例,但唯一触发的是“drag”-eventListener。 I console.logged the drake instance in there and saw all my relevant containers correctly assigned我在那里 console.logged drake 实例并看到我所有相关的容器都正确分配

I've also thought that there could be a minification failure with the dragula bundle and so i used the version from the cdn我还认为 dragula 包可能会出现缩小失败,所以我使用了 cdn 中的版本

 class ProcessGridDrag extends React.Component { constructor() { super(); this.dragContext = null; this.dragContainers = []; } componentDidMount() { // eslint-disable-next-line no-undef this.drake = dragula(this.dragContainers, options); console.log('didMount'); console.log(this.drake.containers); this.drake.on('drop', this.onDropTile); this.drake.on('out', this.onOutContainer); this.drake.on('over', console.log); this.drake.on('drag', () => { debugger; console.log(this.drake); }); this.drake.on('shadow', console.log); // Override for touchmove for correct behaviour on iPad window.addEventListener('touchmove', () => {}); } componentWillUnmount() { this.dragContainers = []; console.log('will Unmount'); this.drake.containers = []; this.drake.off('drop', this.onDropTile); this.drake.off('out', this.onOutContainer); this.dragContext = null; this.drake.destroy(); } // This one is passed down to components which should act as a drag container dragulaDecorator = componentBackingInstance => { if ( componentBackingInstance && this.dragContainers.indexOf(componentBackingInstance) === -1 ) { this.dragContainers.push(componentBackingInstance); } };

webpack.config.prod: https://pastebin.com/BLu2hmmv webpack.config.dev: https://pastebin.com/3wczNisj webpack.config.prod: https://pastebin.com/BLu2hmmv webpack.config.dev: https://pastebin.com/3wczNisj

I had a Problem with my css.我的 css 有问题。 I've overwritten the top-value of the dragged element.我已经覆盖了拖动元素的最高值。

Because of a different LoadOrder in Production this problem only occured there由于生产中的 LoadOrder 不同,这个问题只发生在那里

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 `react-hover` npm软件包不在生产版本中,但在开发中运行良好 - `react-hover` npm package not in production build but working fine in development 条件在本机生产中反应失败,但在开发中有效 - Condition fails in react native production, but works in development 反应助手导入在生产中失败,但在开发中工作 - react helper import fails in production but works in development React 组件未在生产构建中呈现,但在开发构建中按预期工作 - React component not rendering in production build but works as expected in development build JavaScript在开发中发挥作用,而不在生产中发挥作用(Heroku) - JavaScript Works in Development, Not in Production (Heroku) React-开发和生产中的环境变量 - React - Env variables in development AND production React 应用程序无法通过其请求在生产中访问我的快速应用程序,但在开发中运行良好 - React app can't reach my express app in production with its requests but works fine in development React Framer motion animation 在开发中有效,但在生产构建中无效 - React Framer motion animation works in development but doesn't work in production build React.js 应用程序在开发模式下运行良好,但在构建(生产模式)后出现错误 - React.js app works fine in development mode but has errors after building (production mode) 地理位置开发工作不在生产中 - Geo-location works in development not in production
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM