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

Question

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

我',使用browserify将节点模块转换为我的快递应用程序的浏览器模块.

这是浏览器化的命令

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

Run Code Online (Sandbox Code Playgroud)

这是要求jquery

var jQuery = require('jquery');

Run Code Online (Sandbox Code Playgroud)

这段代码工作正常

jQuery("#info-dialog");

Run Code Online (Sandbox Code Playgroud)

但我不知道如何包含jquery-ui-browserify.我试过这个但不行

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

Run Code Online (Sandbox Code Playgroud)

谢谢

Answer 1

Tod*_*odd 7

这是我如何设置它

所以,从顶部:

创建项目目录:
- 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/,请进入它
- 跑 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>

Run Code Online (Sandbox Code Playgroud)

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

// 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']} );
});

Run Code Online (Sandbox Code Playgroud)

希望这可以帮助!它对我来说很完美.

归档时间：	11 年，11 月前
查看次数：	1657 次
最近记录：	11 年，4 月前