javascript - 无法将 UIkit 与 Webpack 一起使用-6ren

javascript - 无法将 UIkit 与 Webpack 一起使用

转载作者：行者123 更新时间：2023-11-30 15:29:40

25

4

只需使用 webpack 设置一个项目。只需安装 uikitnpm install uikit --save

在我的主要 js 文件中我使用

import 'jquery';
import 'uikit/dist/js/uikit.js';

在我的主 html 文件中，我写了下面的代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.12/css/uikit.min.css" />
</head>
<body>

<ul uk-accordion>
    <li class="uk-open">
        <h3 class="uk-accordion-title">Item 1</h3>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <h3 class="uk-accordion-title">Item 2</h3>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <h3 class="uk-accordion-title">Item 3</h3>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

<script src="dist/main.js"></script>
</body>
</html>

White 运行 npm start 一切正常。但它说 Uncaught ReferenceError: UIkit is not defined。

Error picture is here. click on me

我错过了什么..感谢您的帮助。

最佳答案

UIKit 需要它在 window 对象中的东西。所以这可能是在 main.js 中执行此操作的简单方法:

import Vue from 'vue';
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
import jQuery from 'jquery';
import App from './App';

UIkit.use(Icons);

window.jQuery = jQuery;
window.UIkit = UIkit;

module.exports = new Vue({
  router,
  el: '#app',
  template: '<App/>',
  components: { App },
  store,
});

相反，更好的解决方案似乎是根据 this SO answer 编辑 Webpack 配置.所以，这对我有用:

{
    test: require.resolve('jquery'),
    loader: 'expose-loader?jQuery!expose-loader?$'
  },
  {
    test: require.resolve('uikit'),
    loader: 'expose-loader?UIkit'
  }

关于javascript - 无法将 UIkit 与 Webpack 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42422885/

25

4

0

文章推荐： c - 在另一个字符集中对奇怪的字符进行 Urlen 编码

文章推荐： c# - NUnit 以编程方式设置测试名称

文章推荐：将用户输入转换为 unicode

文章推荐： c# - 如何解决 NopCommerce 错误？

uikit - 核心图形和 UIKit 交互
大家好，我正在尝试制作一个具有大量动画和效果的交互式 UI。但我不知道是否: 核心图形可以支持用户交互(触摸、拖动等) 核心图形支持对象旋转核心图形可以以任何方式与 UIKit 和核心动画交互谢
uikit - 为什么一些 UIKit 函数返回隐式展开的可选值？
我正在查看 Swift 中的一些 UIKit header ，特别是用于 UIViewController 的 header ，并且有几个函数返回隐式展开的可选值而不是普通的可选值。例如: //旋转
xamarin - UIKit.UIKitThreadAccessException : UIKit Consistency error: you are calling a UIKit method that can only be invoked from the UI thread
我正在尝试运行此代码: GetRepsButton.Command = new Command(async () => { var url =
xamarin - UIKit.UIKitThreadAccessException : UIKit Consistency error: you are calling a UIKit method that can only be invoked from the UI thread
我正在尝试运行此代码: GetRepsButton.Command = new Command(async () => { var url =
swiftui - UIKit > SwiftUI > UIKit 时未显示导航栏项目
从 SwiftUI View 推送到 UIKit 时，导航栏项目不存在或未添加。我在 Storyboard中添加了一项，在代码中添加了一项，但都没有显示。这可能是 SwiftUI 中的一个错误，但
uikit - 消息发送到释放的实例，UIKit 框架崩溃，如何调试？
嘿，你们这些聪明人；一个艰难的crash bug 调试了很多天，还是没有找到根本原因，渴望得到您的提示和指导。它是一个表格 View Controller ，但由于我们在其中添加了许多其他 UI
ios - 无法将模块 'UIKit' 加载为 'UIKit'
目前正在尝试打开一个在 Swift 3、Xcode 8.1 中创建的应用程序。我进行了大量研究，删除派生数据并一遍又一遍地清理整个项目。我已将 Xcode 及其语法更新为最新版本。 MapKit 可能
uikit-dynamics - UIKit Dynamics UICollisionBehavior 无反弹的碰撞
我有一个 View ，其边界设置为碰撞( setTranslatesReferenceBoundsIntoBoundaryWithInsets )和一个带有重力的 subview 设置，以便它可以与
uikit - 我可以在一个应用程序中混合 UIKit 和 TVMLKit 吗？
我正在探索 tvOS，我发现 Apple 提供了一套不错的 templates使用TVML编写。我想知道使用 TVML 模板的 tvOS 应用是否也可以使用 UIKit。我可以在一个应用程序中混合使
ios - 导入我的框架后需要将 UIKit 显式导入项目中的所有 UIKit 子类
在导入我的框架后，需要将 UIKit 显式导入项目中的所有 UIKit 子类。我决定从我的项目中导出所有 objective-c 类并制作一个框架。我使用 Google map 框架创建了该框架
uikit - swift playground 支持 UIKit 吗？
我试图在 playground 中创建一个 UILabel 但失败了。 playground 目前只支持 OS X 开发吗？最佳答案是的，确实如此! 文件:新建 > 文件... > iOS > 源
SwiftUI/UIKit 如何将 SwiftUI 字体转换为 UIKit UIFont？
由于 SwiftUI 文本中的一些限制。我必须使用 UIText 代替。在 UIViewRepresentable 中， func makeUIView(context: Context)
uikit - addSubView SwiftUI View to UIKit UIView in Swift
我试图将SubView SwiftUI View 添加到UIView。 self.view.addSubview(contentView) Error: Cannot convert value of
uikit - SwiftUI 通过实现 UIViewRepresentable 使用 UIKit 组件
好的，我知道如何使用 UIViewRepresentable 和 Coordinator 包装像 TextField 这样的 UIKit 组件，以便与 SwiftUI 一起使用。一切都运转良好。但是，
ios - UIKit Dynamics 和 UIKit Animation 有什么区别？
UIKit Dynamics 和 UIKit Animation 在动画层面最本质的区别是什么？关于 UIKit Dynamic 的资料并不多。我对此了解不多。我只知道如何使用它。我认为这个问题与硬
iphone - 词法或预处理器问题错误(未找到 UIKit/UIKit.h 文件)
我已经阅读了有关词法和预处理器问题的其他问题，并且我尝试使用有助于解决他们的问题的方法。不幸的是，这些解决方案都无法帮助解决问题。这个错误不知从何而来，我不确定除了阅读之外我还能做什么来解决这个问题。
ios - 导入 UIKit 而不是特定的 UIKit 组件是否有任何性能/编译时间优势？
例如我有以下界面。 #import @interface someClass : NSObject @property (nonatomic, copy) NSString *string; @pro
swift ，UIKit : How can I diagnose EXC_BAD_INSTRUCTION in UIKit on tableView. PerformBatchUpdates()
我多年来一直在与 tableView.performBatchUpdates 的 UIKit 问题作斗争。我有一个简单的数据模型，其中包含由 tableView 和 tableViewCells 驱
ios - pch 上的#import 会减慢编译时间吗？
我正在读这个post关于进口，我有一个问题。默认情况下，prefix.pch 文件中的#import 会减慢编译时间吗？我应该删除它并仅在必要时导入吗？ #ifdef __OBJC__ #im
objective-c - 为什么去掉 UIKit.h 的导入后还能引用 UIKit 的类？
我一直在观看一个视频，该视频指出 UIAlertView 仅在导入 UIKit.h 时才有效。但是，如果我在头文件中注释掉 import 语句: //#import @interface ViewC

首页

博学

6Ren·AI

商城

javascript - 无法将 UIkit 与 Webpack 一起使用