如何使用jowerUI与凉亭？

问题描述：

我曾尝试使用下面的命令

yo webapp

我想用jqueryui所以我一直在使用的凉亭安装它创造了一个自耕农的webapp：

bower install jquery-ui --save

也能正常工作，但jQuery的UI组件不包含带有“全部”组件的JavaScript文件，它只包含很多JavaScript文件，每个组件都有一个。

我应该只包含我需要的JavaScript文件吗？或者在使用jQuery UI之前我应该做些什么？

感谢您的提示！

答

如果您需要所有内容或仅用于实验，我只需包含我需要的文件或使用文件夹中的默认自定义构建（我相信它具有所有组件）。

<script src="components/jqueryui/ui/jquery-ui.custom.js"></script>

这时凉亭拉低整个回购，因为（从他们的网站）“鲍尔只是一个包管理器”什么都需要像串联或加载模块是由像链轮/ requirejs其他工具处理。

参考文献：

主页上使用包带凉亭http://bower.io/

Dissusion约闺房，然后用jquery一起拉动整个回购 https://github.com/bower/bower/issues/45

伟大的职位！ bower的想法很棒，但它缺乏一种提供整个库包的方式（即使项目没有编译成单个资源）。直到现在凉亭是一场噩梦:) – 2013-04-30 18:53:10

jquery-ui.custom.js从1.10.2开始不再存在。我想你需要一些咕噜的任务来建立它？ – 2013-10-01 15:54:19

答

新增jquery-ui在bower.json（或component.json）dependencies。

{ 
    …, 
    "dependencies": { 
    "jquery": "~1.9.1", 
    "jquery-ui": "~1.10.3", 
    ... 
    }, 
    … 
}

安装：

bower install

然后，添加路径jqueryui在main.js并要求其：

require.config({ 
    paths: { 
    jquery: '../components/jquery/jquery', 
    jqueryui: '../components/jquery-ui/ui/jquery-ui', 
    … 
    }, 
    shim: { 
    jqueryui: 'jquery', 
    … 
    }, 
    … 
}); 
require(['app', 'jquery', 'jqueryui', 'bootstrap'], function (app, $) { 
    'use strict'; 
    ... 
});

这对我的作品。

OP没有提到require.js – gotofritz 2015-02-21 23:57:35

答

你可以使用requirejs.config的垫片属性来实现自己的目标：

requirejs.config({ 
    shim: { 
     'jquery.ui.sortable': { 
      deps: ['jquery', 'jquery.ui.core', 'jquery.ui.widget', 'jquery.ui.mouse', 'jquery.ui.position'], 
      exports: '$' 
     } 
    } 
});

我们指定，即jquery.ui.sortable，需要在你的项目时，需要加载并执行deps下面列出的模块第一，在被执行之前。

不幸的是，这仍然会产生竞态条件......但是，这通常是一个将如何去这个（：

我不认为jquery.ui.position是jquery.ui.sortable的一个要求。 – 2013-10-16 15:55:15

实际上，文档没有提到jquery.ui.position是必需的，但它当然是！ – 2013-10-16 16:02:14

OP没有提到require.js – gotofritz 2015-02-21 23:56:26

答

在最新的jQuery UI的亭子组成，因为我们说话（V 1.10。3），你可以做到以下几点：

对于CSS主题，包括以下链接：

<link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">
为了最有效的部件和运行jQueryUI的的小工具，包括以下脚本：

<script src="bower_components_path/jquery-ui/ui/jquery-ui.js" ></script>

答

作为参考，bower install jquery-ui --save会将jquery-ui.js依赖项添加到项目，但不添加样式。对于我需要添加到bower.json文件的overrides部分，如下

{ 
    ..., 
    "dependencies": { 
    ..., 
    "jquery-ui": "^1.11.4" // already added with --save from bower install command 
    }, 
    ..., 
    "overrides": { 
    "jquery-ui": { 
     "main": [ 
     "themes/smoothness/jquery-ui.css", 
     "jquery-ui.js" 
     ] 
    } 
    } 
}

参考文献：

https://*.com/a/27419553/4126114

https://github.com/taptapship/wiredep/issues/86

使用wiredep的'overrides'也很好地工作，如果你想定制一个jquery-ui – plong0 2016-06-06 17:05:29

如何使用jowerUI与凉亭？

相关推荐