npm下如何使用jQuery

最新推荐文章于 2024-10-18 19:28:45 发布

X_ABU

最新推荐文章于 2024-10-18 19:28:45 发布

阅读量5.9k

点赞数 5

分类专栏： node.js 配置文件文章标签： node.js jquery javascript npm

本文链接：https://blog.csdn.net/X_ABU/article/details/106088645

版权

配置文件同时被 2 个专栏收录

8 篇文章

订阅专栏

node.js

1 篇文章

订阅专栏

本文详细介绍如何在项目中安装并配置jQuery库与Webpack打包工具。通过npm安装jQuery后，需在webpack.config.js中进行配置，包括引入webpack、创建HtmlWebpackPlugin实例，并在plugins中使用webpack.ProvidePlugin来全局提供jQuery。示例代码展示了React应用中如何导入和使用jQuery。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装jQuery
```
npm i jquery -S
```

配置webpack.config.js

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
// 第一步 引入webpack
const webpack = require('webpack')
const htmlWebPackPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, './src/index.html'),
    filename: 'index.html'
})

module.exports = {
    mode: 'development',
    devtool: 'eval-source-map',
    plugins: [
        htmlWebPackPlugin,
        // 第二步 配置组件
        new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
    ],
    module: {
        rules: [
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
        ]
    }
}

案例
在用的地方使用import $ from 'jquery' 就可以正常使用了

import React from 'react'
import ReactDOM from 'react-dom'
import $ from 'jquery'

class UserGist extends React.Component {
  constructor(props) {
      super(props);
      this.state = {username: '', lastGistUrl: ''};
  }
 
 
  componentDidMount() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  }
 
  componentWillUnmount() {
    this.serverRequest.abort();
  }
 
  render() {
    return (
      <div>
        {this.state.username} 
        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
      </div>
    );
  }
}
 
ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.getElementById('app')
);