在NodeJs中使用jQuery?

想要在NodeJs中使用jQuery?

首先,我们得安装jquery, npm install jquery 。安装后的版本是 3.1.0

接着,第一感觉我们会使用 var $ = require('jquery') 。

将以下代码保存为app.js

?
1
2
3
4
var $ = require( 'jquery' )
 
$( "body" ).append( "<div>TEST</div>" );
console.log($( "body" ).html());

运行 node app.js 。提示错误:

Error: jQuery requires a window with a document

那么我们该怎么做呢?

在 npm的jquery安装包首页 ,我们看到可以使用 jsdom 进行模拟一个document。

?
1
2
3
4
5
6
7
8
9
require( "jsdom" ).env( "" , function (err, window) {
   if (err) {
     console.error(err);
     return ;
   }
   var $ = require( "jquery" )(window);
   $( "body" ).append( "<div>TEST</div>" );
   console.log($( "body" ).html());
});

运行,结果OK。

上面的代码,有一个让我不太舒服的地方就是要在回调函数中进行操作。那么我们如何做才可以不在回调函数中进行引入jquery呢?

?
1
2
3
var $ = require( 'jquery' )(require( "jsdom" ).jsdom().defaultView);
$( "body" ).append( "<div>TEST</div>" );
console.log($( "body" ).html());

一样运行OK。

以上就是本文给大家分享的全部内容了,希望对大家学习node.js能够有所帮助

在Visual Studio Code (VS Code) ,虽然默认情况下不需要额外配置就能直接使用`<script>`标签引入外部库如jQuery,但如果你想使用Node.js的npm包管理工具(比如`npm`或`yarn`)来引入jQuery,可以按照以下步骤操作: 1. **安装Node.js和npm(如果还未安装)**: 可从Node.js官网(https://nodejs.org)下载并安装。 2. **创建一个新的Node.js项目(optional)**: 进入你想存放项目的地方,运行 `npm init -y` 创建一个简单的package.json文件。 3. **安装jQuery**: - 打开终端或命令行窗口,导航至项目目录。 - 输入命令 `npm install jquery` 来安装jQuery作为依赖。 - 或者使用 `yarn add jquery` (如果使用yarn作为包管理器)。 4. **配置webpack(如果项目使用Webpack)**: - 在`package.json`的`"scripts"`字段,添加一个打包命令,如 `"build": "webpack"`。 - 在`webpack.config.js`设置externals选项,将jQuery作为一个全局变量引入,避免打包时重复。 5. **引用jQuery**: - 在入口文件(通常是index.js或main.js),你可以通过`import * as $ from 'jquery';`引入。 6. **在HTML引用生成的bundle(如果使用Webpack)**: - 使用Webpack打包后的`dist`目录下的输出文件,通常会有一个.js或.js.map文件。 ```html <script type="module" src="./dist/bundle.js"></script> ``` 7. **如果不使用Webpack**: - 直接在HTML引用`node_modules/jquery/dist/jquery.min.js`。 请注意,这针对的是使用Node.js环境的情况。如果你只是简单地想在浏览器环境jQuery,那么按照第1步下载jQuery文件并手动添加到HTML即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值