webpack 全局引入jquery_webpack 引入jquery - CSDN
精华内容
参与话题
  • 如何引入jquery? 基本使用 先安装jq依赖包 npm i jquery 在js文件中引入 import $ from 'jquery' console.log($)//f 有内容 console.log(window.$)//undefined 问题:我们能够拿到,但是因为模块化,,但是...

    如何引入jquery?

    1. 基本使用
      1. 先安装jq依赖包
          npm i jquery
      
      1. 在js文件中引入
      import $ from 'jquery'
      console.log($)//f 有内容
      console.log(window.$)//undefined
      
      问题:我们能够拿到,,但是因为模块化,并不是挂载在window下的

    引入第三方库的方法,并且注明哪些方法可以暴露给window

    1. 方法一:使用暴露全局的loader:expose-loader,能暴露给window

      1. 使用内联loader的方法,能暴露给window
      import $ from 'expose-loader?$!jquery'
      //这句话的意思就是将jquery以$的形式暴露给window
      
      console.log($)//f 有内容
      console.log(window.$)//f 有内容
      
      1. 使用loader配置的方法,能暴露给window
      //在webpack.config.js
      rules:[
      	{
      		test:require.resolve('jquery'),//表示只要你引用了jquery,就能匹配到
      		use:'expose-loader?$'
      	}
      ]
      
      //然后在js中
      import $ from 'jquery'
      console.log($)//f 有内容
      console.log(window.$)//f 有内容
      
    2. 方法二:使用webpack插件,这个方法只要在webpack配置一下,所有模块都可以使用了,但是不会暴露给window

      //在webpack.config.js中
      let Webpack = require('webpack');
      
      plugins:[
          new Webpack.ProvidePlugin({
              '$':'jquery'
          })
      ]
      
      //在任何js模块中,可以直接使用$,但是这个$不会暴露给window
      console.log($)//f 有内容
      console.log(window.$)//undefined
      
    3. 方法三:使用CDN,能暴露给window

      1. 正常使用:,能暴露给window
      //header中插入:
      <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
      
      //然后直接可以使用
      console.log($)//f 有内容
      console.log(window.$)//f 有内容
      
      1. 不正常使用,与安装的jquery混淆使用:,能暴露给window
      //header中插入:
      <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
      
      //然后import混淆使用:
      import $ from 'jquery'
      console.log($)//f 有内容
      console.log(window.$)//f 有内容
      

      这样会导致在npm run build的时候,将jquery打包进去,但事实上我们用了CDN分发就无需打包进去了,这时候可以用如下配置解决:

      //在webpack.config.js中
      module.exports = {
          externals:{//无需打包的配置,代表这是外部引入的,无需打包
      		'jquery':'$'
      	},
      }
      

    总结

    我们有以下方法来使用第三方模块:

    1. expose-loader 暴露到window上,能暴露给window
    2. providePligin 给每个模块注入第三方库(比如$),不能暴露给window
    3. 引入不打包的方式,能暴露给window
    展开全文
  • webpack全面引入jQuery

    2019-07-12 11:06:40
    方法一:使用expose-loader 链接地址 //首先安装expose-loader npm install expose-loader ...//添加这个loader到你的webpack配置中 webpack.config.js module.exports = { module: { rules: [ { test: /.js/, ...

    方法一:使用expose-loader 链接地址

    //首先安装expose-loader
     npm install expose-loader --save-dev
    //添加这个loader到你的webpack配置中 webpack.config.js
    module.exports = {
      module: {
        rules: [
          {
            test: /.js/,
            use: [
              {
                loader: `expose-loader`,
                options: {...options}
              }
            ]
          }
        ]
      }
    }
    //在你的代码中require目标文件
    // src/entry.js
    require("expose-loader?libraryName!./thing.js");
    

    方法二:配置webpack.conf.js

    const webpack = require('webpack')
    module.exports = {
      ...,
      plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          jquery: "jquery",
          "window.jQuery": "jquery"
        })
      ],
    }
    

    方法三:最简单直接,在你需要用到jquery的文件中

    var $=require('jquery')
    
    展开全文
  • Webpack全局引入jquery

    千次阅读 2018-06-28 11:36:16
    方法一:使用expose-loader 链接地址 //首先安装expose-loader npm install expose-loader --...//添加这个loader到你的webpack配置中 webpack.config.js module.exports = { module: { rules: [ { test: /.j...

    方法一:使用expose-loader 链接地址

    //首先安装expose-loader
     npm install expose-loader --save-dev
    //添加这个loader到你的webpack配置中 webpack.config.js
    module.exports = {
      module: {
        rules: [
          {
            test: /.js/,
            use: [
              {
                loader: `expose-loader`,
                options: {...options}
              }
            ]
          }
        ]
      }
    }
    //在你的代码中require目标文件
    // src/entry.js
    require("expose-loader?libraryName!./thing.js");

    方法二:配置webpack.conf.js

    const webpack = require('webpack')
    module.exports = {
      ...,
      plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          jquery: "jquery",
          "window.jQuery": "jquery"
        })
      ],
    }

    方法三:最简单直接,在你需要用到jquery的文件中

    var $=require('jquery')
    展开全文
  • vue-cli2 中全局引入jquery 1、使用npm install --save-dev jquery 安装jquery 相关的组件 2、修改 webpack.base.conf.js 配置文件,内容如图 3、直接在vue文件中使用$即可,$代表的是jquery对象 在vue-...

    vue-cli2 中全局引入jquery

    1、使用npm install --save-dev jquery 安装jquery 相关的组件

    2、修改 webpack.base.conf.js 配置文件,内容如图

     

    3、直接在vue文件中使用$即可,$代表的是jquery对象

     

    在vue-cli3中引入全局jquery

    在配置文件 vue.config.js 文件中添加 configureWebpack 属性

    // vue.config.js
    const webpack = require("webpack");
    
    module.exports = {
      transpileDependencies: ["vue-echarts", "resize-detector"],
      configureWebpack: {
        //支持jquery
        plugins: [
          new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "windows.jQuery": "jquery"
          })
        ]
      },
      publicPath: "./"
    };
    

     

    引入jquery的目的是为了DOM 节点查找,则可以不用引入jquery

    1. 查找节点的目的是为了操作或者修改节点的属性
    2. vue 的双向绑定“能力” ,导致我们在绝大部分情况下不需要找DOM 节点直接改变数据,提高效率
    3. 如果某些节点没有被“双向绑定”,则可以使用 document.querySelector 和 document.querySelectorAll 两个内置函数

     

    参考 

     

     

     

    展开全文
  • vue-cli webpack全局引入jquery 首先在package.json里加入, dependencies:{ "jquery" : "^2.2.3" } 然后 npm install 在webpack.base.conf.js里加入 var webpack = require("webpack&...
  • webpack如何全局引入jquery和插件?

    万次阅读 2017-02-03 13:36:25
    有点不可能,既然$算是webpack中的一个变量,那么你只能通过require的方式引入jQuery的第三方插件。第三方插件的结果只有两个,要不你就被打包引入你的js文件里,要不你就被引入vendor里。   结果一:打包进引入的...
  • webpack4引入JQuery的两种方法

    万次阅读 2018-07-19 15:58:43
    非script标签的形式引入JQuery。 安装JQuery: 先安装加载器expose-loader,用于将插件暴露到全局中供其他模块使用: npm i expose-loader --save 安装JQuery: npm install jquery --save 以上两个模块也是...
  • Webpack引入jquery及其插件的几种方法

    万次阅读 2017-05-24 18:07:57
    webpack引入jquery很困难,引入jquery插件更困难,本文提供了多种方法在webpack项目中引入jquery及其相关插件。
  • 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack'...
  • webpack全局配置jQuery

    千次阅读 2019-04-07 14:06:41
    1. 全局变量引入,全局引入jQuery Plugin: webpack.ProvidePlugin 自动加载模块,不必到处import 或 require 引入模块。 webpack.config.js文件 ``` let webpack = require('webpack') plugins: [ ..., new...
  • 一、webpack使用ES6语法,第三方js可以引入通过import,可以通过npm 配置到项目中或者直接下再加入项目js文件中 首先无论require还是import,都不是webpack的发明,它们是已经存在于世的不同的模块化规范(目前都不...
  • vue中引入jquery

    万次阅读 2018-03-07 10:37:19
    npm install jquery --save-dev2、在项目根目录下的build/webpack.base.conf.js文件中:① 先写以下代码var webpack = require("webpack") ②在module.exports的最后写plugins: [ new webpack.optimize....
  • webpack的ProvidePlugin配置

    万次阅读 2017-11-23 14:39:30
    webpack
  • 简单的webpack- 引入bootstrap

    万次阅读 2017-05-16 17:02:15
    如果可以使用webpack引入的bootstrap.css,就可以一个npm install完成项目的依赖,而不必手工的添加到html内。 本来以为在入口文件内加一行就行: import 'bootstrap/dist/css/bootstrap.css' 然后安装依赖...
  • 在vue项目中正确的引入jquery

    万次阅读 热门讨论 2017-07-03 13:45:34
    在vue项目中正确的引入jquery
  • vue2中全局引入jquery的步骤

    千次阅读 2019-02-20 14:47:45
    1、vscode打开项目,打开中断安装:npm install jquery --save-dev 安装成功可以再package-lock.json里面看到安装的jquery的版本号 2、在项目根目录下的build/webpack.base.conf.js文件中,第5行下面加入这行代码...
  • nuxt.js中如何引入jquery和boostrap

    千次阅读 2017-12-12 11:49:16
    1 2 const webpack=require(‘webpack’); 最上面写入 34安装依赖, cnpm install
  • vue项目中使用jQuery

    万次阅读 2017-02-09 11:06:45
    这里是引入全局jQuery 1.在package.json文件中,‘devDependencies’对象中添加”jquery”: “^3.1.1”, 2.在build文件夹下的webpack.base.conf.js文件中添加:var webpack = require("webpack") // 增加一个...
  • Webpack的externals的使用

    万次阅读 2018-08-03 10:34:50
      通过这种方式引入的依赖库,不需要webpack处理,编译进文件中,在我们需要,使用它的时候可以通过CMD...比如我们在index.html用CDN的方式引入jquerywebpack编译打包时不处理它,却可以引用到它。 &lt;s...
  • vue-cli webpack全局引入jquery

    千次阅读 2017-07-26 11:06:39
    "jquery" : "^2.2.3" }2:然后 npm install3:在webpack.base.conf.js里加入var webpack = require("webpack")4: module.exports的最后加入plugins: [ new webpack.optimize.CommonsChunkPlu
1 2 3 4 5 ... 20
收藏数 5,905
精华内容 2,362
关键字:

webpack 全局引入jquery