在客户端中包含 jquery-ui-browserify答案

【问题标题】：Include jquery-ui-browserify in client在客户端中包含 jquery-ui-browserify
【发布时间】：2014-04-21 14:21:54
【问题描述】：

我，使用 browserify 将 node 模块转换为我的 express 应用程序的浏览器模块。

这是浏览器化的命令

browserify -r jquery > ./public/js_app/jquery.js
browserify -r jquery-ui-browserify > ./public/js_app/jquery-ui.js

这是需要 jquery

var jQuery = require('jquery');

这段代码运行良好

jQuery("#info-dialog");

但我不知道如何包含 jquery-ui-browserify。这个我试过了，但是不行

var jQuery = require('jquery');
require('jquery-ui-browserify');
jQuery("#info-dialog").dialog({
  resizable: false,
  height: 100,
  modal: true
});

谢谢

【问题讨论】：

你为什么不把 require jQuery 和 jQuery UI 放在一个文件中，然后将它们捆绑在一起呢？此外，您应该将一些变量分配给require('jquery-ui-browserify')。例如：var jQueryUI = require('jquery-ui-browserify');

标签： javascript jquery node.js

【解决方案1】：

我是这样设置的

那么，从上到下：

创建项目目录：
- mkdir myProject && cd ./myProject创建目录
- npm init 将以交互方式创建您的 package.json
安装依赖项
- sudo npm install jquery jquery-ui-browserify --save
  - 这会同时安装，--save 会将它们添加到您的 package.json 中
创建应用程序结构
- mkdir app 将创建您的主文件夹
- cd app && touch index.html app.js
在 app.js 中编写您的脚本，要求并使用您希望的所有内容：
- 第一var $ = require('jquery'); require('jquery-ui-browserify');
- 下面，照常编写脚本
浏览该卡顿！
- 打开终端，如果不在 /myProject/app/ 中，则 cd 进入它
- 运行browserify ./app.js > ./bundle.js
在 index.html 中，将 <script src='bundle.js'></script> 包含在关闭 body 标记之前，您就可以开始使用了。

示例代码

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Project</title>
  </head>
  <body>
    <h1>My Project</h1>
    <input type="text">
    <script src='bundle.js'></script>
  </body>
</html>

这里，只是标记了一个基本的html5页面，包含了browserify生成的bundle.js文件。现在我们可以使用这个包了。

// app.js
// NOTE: remember, you code this before running `browserify ./app.js > ./bundle.js`
var $ = require("jquery");
require("jquery-ui-browserify");

$(function() {
  $('input').autocomplete({ source: ['jquery', 'mootools', 'underscore']} );
});

希望这会有所帮助！它对我来说非常有效。

【讨论】：