Rails 6+ Webpack document.addEventListener不工作

Rails是一款基于Ruby语言的Web应用开发框架，而Webpack是一个前端模块打包工具。在Rails 6+版本中，结合Webpack进行前端开发是一种常见的方式。

在Rails中，如果document.addEventListener不起作用，可能有以下几个可能的原因和解决方案：

确认事件绑定的位置：首先需要确认事件绑定的位置是否正确。确保代码所在的地方能够正确访问到document对象。
确认事件类型是否正确：确保你绑定的事件类型是正确的。例如，如果你想要绑定点击事件，应该使用"click"作为事件类型。
确认事件绑定的元素是否存在：确保你绑定事件的元素已经被正确加载到页面上。你可以通过使用console.log或者调试工具来确认该元素是否存在。
确认事件绑定的时机：在Rails中，由于Webpack的引入方式和加载时机的不同，可能需要在页面加载完成后再绑定事件。你可以使用如下代码来确保事件在页面加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  // 在这里绑定事件
});

确认事件处理函数是否正确：确保你的事件处理函数是正确的，并且能够执行你期望的操作。

以上是一些常见的解决方法，但具体解决方案还需要根据实际情况进行调试和排查。另外，如果你在Rails项目中使用Webpack，你可以考虑使用一些与Webpack集成的Gem，例如"webpacker"，它提供了一些便利的方法和配置，可以更好地支持前端开发。

腾讯云相关产品和产品介绍链接地址：

腾讯云：https://cloud.tencent.com/
云服务器CVM：https://cloud.tencent.com/product/cvm
云原生容器服务TKE：https://cloud.tencent.com/product/tke
云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
人工智能AI平台：https://cloud.tencent.com/product/tii
物联网IoT Hub：https://cloud.tencent.com/product/iothub
移动开发服务移动推送：https://cloud.tencent.com/product/umeng
云存储COS：https://cloud.tencent.com/product/cos
区块链服务：https://cloud.tencent.com/product/bcos
腾讯元宇宙：https://cloud.tencent.com/product/virtual-universe

注意：以上链接仅供参考，具体产品选择应根据实际需求进行评估。

相关·内容

webpack的watch选项不工作原因分析

使用vue-cli创建项目因为以前用过webpack，而vue-cli创建的项目底层其实还是使用webpack构建的，所以使用起来还是很简单的。...，更不会reload浏览器页面，webpack的watch选项失效了。...在网上搜索了下原因，发现webpack的一个issue项。...继续翻查资料，终于在webpack的官方文档中找到说明https://webpack.github.io/docs/troubleshooting.html#watching。...但这样webpack检测文件变动的原来逻辑就不工作了。代码见webpack/lib/node/NodeWatchFileSystem.js。

4.1K6 0

React 学习路线图 2018版

·学习 DOM 的基础操作 ·学习 JS 中的经典机制 (提升、事件冒泡、原型) ·发起一些 AJAX (XHR) 请求 ·学习新功能 (ES 6+...包管理工具 ·npm ·yarn ·pnpm ii.任务执行工具 ·npm scripts ·gulp ○Webpack...○React i18next 14.服务端渲染 ○Next.js ○After.js 15.静态网站生成器 ○Gatsby 16.后端集成框架 ○React on Rails

2.4K4 1

Rails 7 中引入 Bootstrap 5

Rails 应用外很少使用，但是 “Webpacker” 不仅在 Rails 中，在其他应用框架中也被广泛的使用。...在 Rails 7 中静态资源的管理已经从 “Webpacker” 改为了 “Import Maps”，用来简化基于 JavaScript 的工具和包管理器 Webpack、Yarn 或者 npm 的使用...Rails 7.0: Fulffilling a vision 本文将使用 Ruby 3.0 和 Rails 7.0 环境，创建 Rails 7 应用，并在该应用中引入 Bootstrap 5。...第一种方式：仅引入 Bootstrap 创建 Rails 项目首先使用 rails new 命令创建 Rails 项目：如果创建项目的时间过长，可以考虑更换 Ruby 的 Gem 源，使用 RubyChina...popperjs/core"; import "bootstrap"; import "my_script"; 在 app/javascript/my_script.js 中添加如下 JS 代码： document.addEventListener

2.5K2 0

Rails 7 中引入 Bootstrap 5

Rails is a full-stack framework. ...在 Rails 7 中静态资源的管理已经从 “Webpacker” 改为了 “Import Maps”，用来简化基于 JavaScript 的工具和包管理器 Webpack、Yarn 或者 npm 的使用...Rails 7.0: Fulffilling a vision本文将使用 Ruby 3.0 和 Rails 7.0 环境，创建 Rails 7 应用，并在该应用中引入 Bootstrap 5。...图片第一种方式：仅引入 Bootstrap创建 Rails 项目首先使用 rails new 命令创建 Rails 项目：图片图片如果创建项目的时间过长，可以考虑更换 Ruby 的 Gem 源，使用 RubyChina...@popperjs/core";import "bootstrap";import "my\_script";图片在 app/javascript/my\_script.js 中添加如下 JS 代码：document.addEventListener

3K5 0

rails -help

[--skip-spring], [--no-skip-spring] 不安装Spring应用程序preloade [--skip-listen], [--no-skip-listen] 不生成依赖于...checkout [--edge], [--no-edge] 使用指向Rails的Gemfile设置应用程序 [--rc=RC] 包含rails的额外配置选项的文件路径 [--no-rc],...railsrc文件中跳过加载额外配置选项 [--api], [--no-api] 为仅API应用程序预配置较小的堆栈 -B, [--skip-bundle], [--no-skip-bundle] 不运行...bundle install [--webpack=WEBPACK] 使用Webpack预先配置类似app的JavaScript(选项: react/vue/angular/elm/stimulus...: 'rails new'命令创建一个带有默认值的新Rails应用程序你指定的路径上的目录结构和配置。

2.6K3 0

vue-cli

我们有一大部分工作就是选择各种工具/库/框架，来黏合业务. 工具和场景越匹配、原理了解越多，运用越娴熟，我们效率可能就越高....这种说法很有争议，就像程序=算法+数据结构不能完全表达现今的软件工程一样, 说我们的工作就是堆砌工具，黏合业务, 一定程度上有自贬的意思。但这确实是大部分程序员的真实写照。...但是目前 Rails 的关注度不如从前, 在前端社区像 Rails 这种集大成的框架也早已不吃香(参考 Ember, 某种程度上 Angular 也算吧?)....没有用 Ruby/Rails 工作过, 默默写了个 Ruby China 小程序(微信搜Ruby CN)，算是感恩回馈社区吧 Ok, 忍不住吹了一波 Rails, 回到正题....尽管目前 vue 也提供了vue upgrade对插件进行升级，这个是基于语义化版本约定的, 且当插件之间存在依赖关系时, 不排除升级存在风险.

3.1K1 0

如何使用本地 Docker 更好地开发？我们总结了这八条经验

作者 | David Eisinger 译者 | 明知山策划 | 褚杏娟如果你像我们一样需要运行许多不同的应用程序，那么将开发环境容器化可以极大地提高工作效率。...我们的开发环境一般包括（通过 Docker Compose 编配）：应用程序（例如 Rails、Django 或 Phoenix）； JavaScript 监视器 / 编译器（例如 webpack-dev-server...举个例子，假设有个 Rails 应用程序使用一个共享的镜像来运行开发服务器和 webpack-dev-server，那么配置可能像这样： services: rails: image: appname_rails.../bin/webpack-dev-server volumes: - ....:/app - yarn:/app/node_modules 这样，在 Rails 开发服务器完全启动并运行之前，webpack-dev-server 是不会启动的。

2.1K4 0

新手向：Vue 2.0 的建议学习顺序

7235 0

Webpack重要知识点

document.createElement('div'); element.innerHTML = _.join(['Clear', 'love'], ''); return element; }) } document.addEventListener...打包后会生成stats.json，然后上传该文件至webpack/analyse进行分析其他分析分工具 webpack-chart webpack-bundle-analyzer 利用魔法注释实现Preload.../Prefetch document.addEventListener('click', () => { import(/* webpackPrefetch: true */ 'lodash')....Dlls 使用DllPlugin将更新不频繁的代码进行单独编译。这将改善引用程序的编译速度。即使它增加了构建过程的复杂度。...多个编译时当进行多个编译时，以下工具可以帮助到你： parallel-webpack: 它允许编译工作在woker池中进行。 cache-loader: 缓存可以在多个编译之间共享。

1.2K4 0

最有效、最全的Vue 2.0 学习路线，各个阶段适用

1.5K2 0

webpack 基础知识整理

# 运行如果不生成配置文件，webpack会按照默认配置去打包，如果我们想自定义配置文件可以在项目根目录添加 webpack.config.js 来自定义配置信息，配置文件的名字也可以自定义： # 默认配置或者默认配置文件...代码被压缩；development：开发环境，代码不压缩 entry: '....通过配置中的 devtool 去配置，参数的含义大概有以下几种情况： devtool 作用 source-map 生成 map 文件，错误精确到行和列 inline-source-map inline，不生成.../webpack.config.js') const complier = webpack(config) const app = express() // publicPath 不设置的话默认 '...= source.replace('reco', name) this.callback(null, result, sourceMap, meta) } 复制 loader 还可以做哪些工作呢

1.3K2 0

React 测试驱动教程

开始让我觉得没有经过测试的 React 程序代码是如此的不标准和凌乱。我想活在一个没有这种感觉的世界，但后来想想，这是不对的。本教程所有的代码都可以在我的 github 仓库中找到。...设置 Webpack 本教程不是一个教如何使用 webpack，所以我不会详细说，但重要的是要了解基本的东西。 Webpack 就像 Rails 中的 Assets Pipeline 一样。...在 package.json 中创建一个别名，来完成构建工作： # package.json ... other stuff "scripts": { "build": "webpack" } 接下来让...我们还定义了 3000 端口，使得更像是 Rails 开发的体验。最后，在 webpack 配置文件中添加一个 resolve 标记，使进口文件看起来更直观。...最终，我们需要设置 Karma，因此 npm script 会变得无效，但如果不设置，它将会正常工作。npm run test:watch 将会监视程序，并在文件发生修改时重新运行。多么高效！

4.6K2 0

【第8期】webpack入门学习手记（二）

在黄色的警告框处，明显提示说，不建议全局安装，因为会将webpack锁定到指定的版本，另外也会在不同的webpack版本的项目中，构建失败。所以我们直接使用本地安装即可。...此协议允许别人以任何方式使用你的代码同时署名原作者，但原作者不承担代码使用后的风险，当然也没有技术支持的义务。jQuery和Rails就是 MIT 协议。...因为我们在执行安装小节是，肯定已经在一个工作目录下，例如我的工作目录是webpackStudy，所以文档中创建新目录mkdir webpack-demo && cd webpack-demo省略掉。...在工作目录下创建webpack.config.js文件。...--config webpack.config.js 执行完之后结果跟之前一样~ 其实也可以不指定--config webpack.config.js这个参数。

5091 0

浏览器的常见考点

除此之外，这还能解释为什么script标签为什么会阻塞 DOM 树渲染，毕竟 JS 是可以修改 DOM 的，如果 JS 执行的时候 UI 也工作，就有可能导致不安全的渲染。...// 初始时候的readyState console.log(document.readyState); // 每次改变都打印readyState document.addEventListener("...它保存在浏览器，不参与与服务器的通信。 sessionStorage：与 localStorage 类似，不同的是信息不是永久存储，仅在当前会话下有效。关闭标签或者浏览器，都会清除。...目前我已知的方法有三个： JSONP：通过script标签实现，但是只能实现GET请求代理转发：Webpack 的 dev 模式，配合proxy选项，启动一个前端服务器，实现代理转发 CORS：后端允许跨域资源共享...，这是我最推荐的一种方法代理转发请见《webpack4 系列教程》，CORS 请见 Koa 部分。

1K2 0

最受推荐的 9本全栈开发书籍，助web前端开发学习

如今全栈工程师在企业工作中占有的地位越来越高，无论是前端工程师，还是后端工程师，都在拼命向全栈发展！...3、《Rails, Angular, Postgres, and Bootstrap》 Rails是构建web应用程序的一个很好的工具，但不是最好的，通过Angular 4、Bootstrap和PostgreSQL...结合可以构建一个功能更加强大的应用，本书涵盖了Postgres 9.5、Rails 5和Ruby 2.3。...Express是构建现代Web应用程序的好工具，除了介绍如何用他们构建程序外，本书还将介绍可用于构建Web程序的其他工具，诸如：React Router，React-Bootstrap，Redux，Babel和webpack...然而，它是有一定难度系数的，并不是一个简单的工作指南。MEAN工作流程不断推进，因此书籍可能会很快变得过时。

4K1 0

Github上开源的10大Javascript模板引擎，助力前端开发

拥有接近 JavaScript 渲染极限的的性能调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）支持 Express、Koa、Webpack 支持模板继承与子模板...Template.js JavaScript模板引擎，简单易用，支持webpack和fis。提供了一组模板语法，用户可以编写一个模板块。...JavaScript文件中没有HTML，HTML中也没有JavaScript；轻松处理AJAX / JSON内容，可在Safari，Chrome，FireFox，Opera和Internet Explorer 6+...该库的大小不超过512个字节。正在大力利用ES6规范。

6.7K3 1

前端性能优化原理与实践

webpack打包在资源请求的过程中，涉及到网络请求的，包括：HTTP、TCP、DNS。其中TCP、DNS前端能做的工作非常有限，因此「优化HTTP」就成为了首要任务。...这些事情webpack十分适合。...webpack性能瓶颈 webpack打包有两个瓶颈： webpack 的构建过程「太花时间」 webpack 打包的结果「体积太大」 webpack优化方案不要让loader做太多事情。...context, args) }, delay) } } const better_scroll = debounce(() => console.log('done'), 1000) document.addEventListener...Reference [1] webpack-bundle-analyzer: https://www.npmjs.com/package/webpack-bundle-analyzer

9742 0

【腾讯云 Cloud studio 实战训练营】云端 IDE 构建移动端H5

持久化和快速加载随开随写，随时保存，再也无需担心断电未保存，不浪费您的每一份灵感。.../src', import.meta.url)) } }})（3）安装 Less Vite 和 Webpack 不同，不需要 less-loader 等，只需安装 lessyarn add -D...) { document.addEventListener('WeixinJSBridgeReady', handleFontSize, false) } else...如果您在创建运行环境为云服务器的工作空间时，看到连接不上的提示，可以检查下列几项：确定该云服务器正在运行中，且可以使用 SSH 连接。确定该云服务器的 SSH 连接端口没被防火墙拦截。...目前工作空间兼容 VS Code 1.56。（6）为什么云服务器工作空间会出现频繁的断线重新？

1731 0

10 种 JavaScript 最常见的错误

在我们工作中，这种错误可能发生的一种场景是：如果在加载元素之前尝试在 JavaScript 中使用元素。因为 DOM API 对于空白的对象引用返回值为 null。...7、 Uncaught RangeError 当你调用一个不终止的递归函数就会发生这种错误。您可以在 Chrome 开发者控制台中进行测试。 ?...document.addEventListener("mousemove", function (event) { console.log(event);}) 总结我们看到上面的 10 个最常见的错误...归根结底是对 JavaScript 基础知识掌握的不扎实。 Vue 相关文章输出计划最近总有朋友问我 Vue 相关的问题，因此接下来我会输出 10 篇 Vue 相关的文章，希望对大家有一定的帮助。...响应式原理（完成）新老 VNode 进行 patch 的过程如何开发功能组件并上传 npm 从这几个方面优化你的 Vue 项目从 Vue-Router 设计讲前端路由发展在项目中如何正确的使用 Webpack

8.6K2 0

【JS】1691- 重学 JavaScript API - Performance API

resource.name} 的加载时间：${resource.duration}ms`); }); 「监测用户交互延迟」 const interactionStart = Date.now(); document.addEventListener...下面是一个示例代码，用于监测用户点击延迟： // 监测用户点击延迟 const interactionStart = Date.now(); document.addEventListener("click...兼容性和优缺点 4.1 兼容性以下是 Performance API 在不同浏览器上的兼容性情况： Chrome 6+ ✅ Firefox 7+ ✅ Safari 8+ ✅ Edge 12+ ✅ Internet...我们可以根据具体需求选择适合的库来简化性能监测和分析的工作。 5.

4755 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Rails 6+ Webpack document.addEventListener不工作

相关·内容

webpack的watch选项不工作原因分析

React 学习路线图 2018版

Rails 7 中引入 Bootstrap 5

Rails 7 中引入 Bootstrap 5

rails -help

vue-cli

如何使用本地 Docker 更好地开发？我们总结了这八条经验

新手向：Vue 2.0 的建议学习顺序

Webpack重要知识点

最有效、最全的Vue 2.0 学习路线，各个阶段适用

webpack 基础知识整理

React 测试驱动教程

【第8期】webpack入门学习手记（二）

浏览器的常见考点

最受推荐的 9本全栈开发书籍，助web前端开发学习

Github上开源的10大Javascript模板引擎，助力前端开发

前端性能优化原理与实践

【腾讯云 Cloud studio 实战训练营】云端 IDE 构建移动端H5

10 种 JavaScript 最常见的错误

【JS】1691- 重学 JavaScript API - Performance API

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐