Rails 6 与 Framework7 使用 Webpacker

Question

使用 Rails 6 和 Framework7。我用 Rails:

创建了一个新的 Rails 应用

rails new xyz

那我运行:

yarn add framework7

我看到 Framework7 安装在 node_modules/framework7。

然后我做了如下修改：

# 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>

这是我的 node_modules:

的屏幕截图

问题

Uncaught ReferenceError: Framework7 is not defined <-- 这是指行 var app = new Framework7({

我有什么tried/checked

我尝试用这个 <script type="text/javascript" src="https://framework7.io/packages/core/js/framework7.bundle.min.js"></script> 在 <head> 中对 Framework7 进行硬编码，但它工作正常。

我还检查了编译后的输出 application.js，我看到 Framework7 被很好地包含在内。

如何让 Webpacker 工作？

Answer 1

我通过更改解决了这个问题：

# 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

Rails 6 与 Framework7 使用 Webpacker

Rails 6 with Framework7 using Webpacker

ruby-on-rails

webpack

html-framework-7