Rails 6 with Framework7 using Webpacker

问题

Using Rails 6 and Framework7. I created a new Rails app with Rails:

rails new xyz

Then I ran:

yarn add framework7

I see Framework7 installed in node_modules/framework7.

Then I made the following changes:

# app/javascript/packs/application.js

import '../stylesheets/application'

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

import 'framework7/js/framework7.bundle.min'

# app/javascript/stylesheets/application.scss

@import '~framework7/css/framework7.bundle.min';

# config/webpack/environment.js

const { environment } = require('@rails/webpacker')

module.exports = environment

# app/views/layouts/application.html.erb

...
<head>
...
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
...
</head>

<body>
  <!-- Following this example https://framework7.io/docs/app-layout.html -->
  <!-- App root element -->
    <div id="app">
      <!-- Statusbar overlay -->
      <div class="statusbar"></div>

      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Initial Page, "data-name" contains page name -->
        <div data-name="home" class="page">

          <!-- Top Navbar -->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Awesome App</div>
            </div>
          </div>

          <!-- Bottom Toolbar -->
          <div class="toolbar toolbar-bottom">
            <div class="toolbar-inner">
              <!-- Toolbar links -->
              <a href="#" class="link">Link 1</a>
              <a href="#" class="link">Link 2</a>
            </div>
          </div>

          <!-- Scrollable page content -->
          <div class="page-content">
            <p>Page content goes here</p>
            <!-- Link to another page -->
            <a href="/about/">About app</a>
          </div>
        </div>
      </div>
    </div>
  ...
  <script type="text/javascript">
    // Following example https://framework7.io/docs/init-app.html
    var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});
</body>

Here's the screenshot of my node_modules:

Problem

Uncaught ReferenceError: Framework7 is not defined <-- this refers to the line var app = new Framework7({

What I have tried/checked

I tried hardcoding the Framework7 in the <head> with this <script type="text/javascript" src="https://framework7.io/packages/core/js/framework7.bundle.min.js"></script> and it worked fine though.

I also checked the output of compiled application.js, and I see Framework7 being included fine.

How to make Webpacker work?

回答1:

I solved this by changing:

# app/javascript/packs/application.js

import '../stylesheets/application'

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

import 'framework7/js/framework7.bundle.min'

# app/javascript/packs/application.js

import '../stylesheets/application'

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

import Framework7 from 'framework7/js/framework7.bundle.min'
window.Framework7 = Framework7

来源：https://stackoverflow.com/questions/57760672/rails-6-with-framework7-using-webpacker

标签

ruby-on-rails

Webpack

html-framework-7