我使用以下命令创建了一个 yeoman webapp
yo webapp
我想使用jqueryui,所以我使用 bower 安装了它:
bower install jquery-ui --save
这很好用,但是 jQuery UI 组件不包含包含“所有”组件的 javascript 文件,它只包含很多 javascript 文件,每个组件一个。
我应该只包含我需要的 javascript 文件吗?或者在使用 jQuery UI 之前我应该做些什么?
感谢您的提示!
添加jquery-ui
在dependencies
(bower.json
或component.json
) 以及jquery
.
{
…,
"dependencies": {
"jquery": "~1.9.1",
"jquery-ui": "~1.10.3",
...
},
…
}
安装它们:
bower install
然后,添加路径到jqueryui
Inmain.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';
...
});
这个对我有用。
在我们所说的最新 jQuery UI bower 组件(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"
]
}
}
}
参考:
如果您需要所有内容或仅用于实验,我只会包含我需要的文件或使用文件夹中的默认自定义构建(我相信它包含所有组件)。
<script src="components/jqueryui/ui/jquery-ui.custom.js"></script>
此时 bower 拉下了整个 repo,因为(从他们的网站上)“bower 只是一个包管理器”,其他任何需要的东西,比如连接或模块加载,都由 sprockets/requirejs 等其他工具处理。
参考:
在主页http://bower.io/上使用带有凉亭的包
关于凉亭和拉动整个回购的讨论 https://github.com/bower/bower/issues/45
您可以使用 requirejs.config 的 shim 属性来实现您的目标:
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
,然后再自行执行。
不幸的是,这仍然会产生竞争条件......但这通常是一个人会如何去做(: