Rails Webpacker не компилирует подкаталог - PullRequest
Новая
       18

Rails Webpacker не компилирует подкаталог

0 голосов
/ 22 апреля 2020

РЕДАКТИРОВАТЬ: Решение: убедитесь, что вы правильно написали методы класса . Моя ошибка возникла из-за ввода contructor() в классе (пожалуйста, обратитесь к исходному коду SocialShareModal.js.

Также убедитесь, что ваш линтер в выбранном вами редакторе работает правильно ! Мой не сделал. Это бы сэкономило мне часы, если бы на самом деле: -)

Я запускаю Rails-приложение (ruby v 2.6.2 / Rails v 6.0.2), используя webpacker , Мой JavaScript работал как шарм, пока я не попытался поместить связанный с компонентом JS в выделенный подкаталог моей app/javascript -каталога.

Это то, что мой JS - дерево файлов выглядит следующим образом: 

javascript
├──channels
├──custom
│  ├──components (new & not working)
│  ├──config
│  ├──helpers (these are working somehow)
│  └──pages
├──config
└──packs

В application.js я импортирую пользовательский Router.js, инициализирую его своими пользовательскими маршрутами, чтобы затем на различных подстраницах инициализировать мои пользовательские JS -классы. До сих пор все работало (и продолжает работать) с классами, которые находятся в папке helpers, однако классы, которые живут в новой папке components, работать не будут. Я не уверен, что они даже собраны и скомпилированы веб-пакетом.

application.js: 

import routes from '../custom/config/routes'
import Router from '../custom/Router'

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

...

class myApp {
  constructor() {
    this._initRouter()
  }

  /**
   * Initializes the router and its routes
   * @private
   */
  _initRouter () {
    this._router = new Router(routes)
  }
}

document.addEventListener('turbolinks:load', function() {
  window.myApp = new myApp()
})

routes.js: 

import Page from '../pages/page'

// Frontend
import Root from '../pages/frontend/root'
import SignInPage from '../pages/frontend/signInPage'

// Dashboard => Admin
import AdminAccountsEditPage from '../pages/dashboard/admin/accounts/edit'

// Dashboard => User
import WelcomePage from '../pages/dashboard/user/welcomePage'

export default [
  // Frontend
  ['', Root],
  ['accounts/sign_in', SignInPage],

  // Dashboard => Admin
  ['admin/accounts/(.*)', AdminAccountsEditPage],

  // Dashboard => User
  ['dashboard/willkommen', WelcomePage],

  // Catch all for when there is no exact match:
  ['(.*)', Page]
]

Router.js: 

/* global location */
export default class Router {
  constructor(routes) {
    this.routes = routes
    this.handleRoute()
  }

  /**
   * Checks if there's a javascript for the current route, requires the class and
   * instantiates it
   * @private
   */
  handleRoute() {
    let { pathname } = location

    // Remove leading and trailing slashes
    pathname = pathname.replace(/^\/|\/$/g, '')

    // Go through routes and check which one matches
    for (let i = 0; i < this.routes.length; i++) {
      const [route, PageClass] = this.routes[i]

      const regexp = new RegExp(`^${route}$`, 'i')
      if (route === true || regexp.test(pathname)) {
        this.currentPage = new PageClass()

        break
      }
    }
  }
}

Page.js: 

import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css'

import FlashMessageHelper from '../helpers/FlashMessageHelper'
import AddToWishlistHelper from '../helpers/AddToWishlistHelper'
import SocialShareModal from '../components/SocialShareModal' // importing it

export default class Page {
  constructor() {
    new tippy('[data-tippy-content]')
    new FlashMessageHelper() // working
    new AddToWishlistHelper() // working
    new SocialShareModal() // NOT working (not initializing)
  }
}

SocialShareModal.js

export default class SocialShareModal {
  get modalSelector() { return '.modal' }
  get triggerModalSelector() { return '.js-trigger-modal' }
  get copyToClipBoardButtonSelector() { return '.js-copy-to-clipboard' }

  contructor() { // As you can see, the error resided here
    console.log('SocialShareModal constructor called')
    this.init()
  }

  init() {
    let modalButton = document.querySelector(this.triggerModalSelector)
    modal.addEventListener('click', handleModalTrigger)
    window.addEventListener('scroll', this.handleTestScroll)
  }

  handleModalTrigger() {
    let modal = document.querySelector(this.modalSelector)
    modal.classList.add('is-active')
  }
}

Я много читал, но не могу понять, проблема, поскольку я не очень удобен с веб-пакетом. Любые предложения о том, как решить эту проблему?

Редактировать: добавлен исходный код для application.js, routes.js, Router.js, Page.js & SocialShareModal.js, чтобы обеспечить больше контекста.

...