Rails 6 with Framework7 使用 Webpacker [英] Rails 6 with Framework7 using Webpacker

查看：34
本文介绍了Rails 6 with Framework7 使用 Webpacker的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 Rails 6 和 Framework7.我用 Rails 创建了一个新的 Rails 应用:

rails new xyz

然后我跑了:

yarn add framework7

我看到 node_modules/framework7 中安装了 Framework7.

然后我进行了以下更改:

# app/javascript/packs/application.js导入'../样式表/应用程序'require("@rails/ujs").start()需要(涡轮链接").开始()require("@rails/activestorage").start()要求(频道")导入'framework7/js/framework7.bundle.min'

# app/javascript/stylesheets/application.scss@import '~framework7/css/framework7.bundle.min';

# config/webpack/environment.jsconst { environment } = require('@rails/webpacker')module.exports = 环境

# app/views/layouts/application.html.erb...<头>...<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %><%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>...<身体><!-- 按照这个例子 https://framework7.io/docs/app-layout.html --><!-- 应用根元素--><div id="应用程序"><!-- 状态栏覆盖--><div class="statusbar"></div><!-- 你的主视图，应该有view-main"类 --><div class="view view-main"><!-- 初始页面，data-name"包含页面名称--><div data-name="home" class="page"><!-- 顶部导航栏--><div class="navbar"><div class="navbar-inner"><div class="title">很棒的应用程序</div>

<!-- 底部工具栏--><div class="toolbar toolbar-bottom"><div class="toolbar-inner"><!-- 工具栏链接--><a href="#" class="link">链接 1</a><a href="#" class="link">链接 2</a>

<!-- 可滚动的页面内容--><div class="page-content"><p>页面内容在此处</p><!-- 链接到另一个页面--><a href="/about/">关于应用</a>

...<script type="text/javascript">//以下示例 https://framework7.io/docs/init-app.htmlvar app = new Framework7({//应用根元素根:'#app'，//应用名称name: '我的应用程序',//应用idid: 'com.myapp.test',//启用滑动面板控制板: {滑动:'向左'，},//添加默认路由路线:[{路径:'/关于/',url: 'about.html',},],//... 其他参数});

这是我的 node_modules 的屏幕截图:

问题

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

我尝试/检查的内容

我尝试使用此 <script type="text/javascript" src="https://framework7.io/packages/core 在 <head> 中对 Framework7 进行硬编码/js/framework7.bundle.min.js"></script> 但它运行良好.

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

如何让 Webpacker 工作?

解决方案

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

# app/javascript/packs/application.js导入'../样式表/应用程序'require("@rails/ujs").start()需要(涡轮链接").开始()require("@rails/activestorage").start()要求(频道")导入'framework7/js/framework7.bundle.min'

到

# app/javascript/packs/application.js导入'../样式表/应用程序'require("@rails/ujs").start()需要(涡轮链接").开始()require("@rails/activestorage").start()要求(频道")从'framework7/js/framework7.bundle.min'导入Framework7window.Framework7 = Framework7

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?

解决方案

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'

to

# 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 with Framework7 使用 Webpacker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆