JS通过Webpack加载但不执行

Posted 2023-05-09

【中文标题】JS通过Webpack加载但不执行

【英文标题】：JS loaded up through Webpack but not executing

【发布时间】：2020-12-10 04:27:35

【问题描述】：

我的应用程序中有一些自定义 javascript 可以切换密码字段的可见性。我正在通过 webpacker 在我的 Rails 6 应用程序中添加 javascript。

代码似乎可以导入（我可以在控制台中看到它已加载），但由于某种原因它没有执行，我就是不知道为什么。在网上查看，我发现这可能是一个范围界定问题，但我不确定如何检查或解决它。

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "../stylesheets/application"
import "bootstrap"
import "../custom/theme"

config/webpack/environment.js

const  environment  = require('@rails/webpacker')
const webpack = require("webpack")

environment.plugins.prepend("Provide", new webpack.ProvidePlugin(
  $: "jquery",
  jQuery: "jquery",
  jquery: "jquery",
  Popper: ["popper.js", "default"]
))

module.exports = environment

app/javascript/custom/theme.js 我相当确定这段代码没问题。我什至在函数中添加了console.logs，它们出现在控制台中没有问题。

;(function ($) 
  'use strict';

  const theme = 
    init: () => 
      theme.passwordVisibilityToggle();
    ,

    passwordVisibilityToggle: () => 

      let elements = document.querySelectorAll('.cs-password-toggle');

      for (let i = 0; i < elements.length; i++) 
        let passInput = elements[i].querySelector('.form-control'),
        passToggle = elements[i].querySelector('.cs-password-toggle-btn');
    
        passToggle.addEventListener('click', (e) => 
          
          if (e.target.type !== 'checkbox') return;
          if (e.target.checked) 
            passInput.type = 'text';
           else 
            passInput.type = 'password';
          

        , false);
      
    
  
  
  theme.init();

)(jQuery);

HTML 同样，很确定这没问题，但只是添加以供参考。

<div class="input-group-overlay cs-password-toggle form-group">
  <div class="input-group-prepend-overlay"><span class="input-group-text"><i class="fe-lock"></i></span></div>
  <%= f.password_field :password, autocomplete: "current-password", placeholder: "Password", required: true, class: "form-control prepended-form-control" %>
  <label class="cs-password-toggle-btn">
    <input class="custom-control-input" type="checkbox"><i class="fe-eye cs-password-toggle-indicator"></i><span class="sr-only">Show password</span>
  </label>
</div>

【问题讨论】：

您是在 标记中还是在 html sn-p 之前呈现 JavaScript？如果是这样，您需要封装一个事件侦听器，该侦听器将在 DOM 加载后运行。

你在使用turbolinks吗？

@rossta 我尝试在正文的末尾加载它，但它仍然无法正常工作。事件监听器会是什么样子？

@Aarthi 是的，我是。

【参考方案1】：

好的。所以我设法修复它。最后我做了两个小改动：

将自定义 JS 移动到 app/javascript/packs/custom.js 下的包中并更新 app/javascript/packs/application.js 以引用新路径. 根据@rossta 的建议在 body 标记底部加载了 javascript。

我分别尝试了以上两种方法，但它们都不起作用。只有当我同时做这两件事时它才有效。

希望这对任何人都有帮助！