webpack jquery已经全局引入 为啥还是提示$未定义

Posted 2023-04-13

webpack.config.js:
externals:
jquery: 'jQuery.noConflict()' //或者jquery:'jQuery'

使用：
var $ = require('jquery');
其它全局组件也一样的，但是看情况最好做一些处理，比如jquery本身套了一层factory来兼容amd等模块格式，你先把这些东西删掉，然后用webpack编译一遍，会自动打包一个webpack包装过的jquery，这个jquery也是可以直接<script>引用的，也可以require。
还有些看情况是否要改成commonJS的格式导出对象，就是module.exports=xx这样。
总之有一条，改动后先用webpack转换一遍库本身再用。
还有一些插件我觉得比较麻烦，理解了webpack的工作方式了稍微改下库的源码其实很简单。 参考技术A 引入jQuery框架要在引入外链式js文件之前引入，说白了就是调换一下引入顺序

vue-cli webpack全局引入jquery

1、首先在package.json里加入，

dependencies:{
 "jquery" : "^2.2.3"
}　

2、安装依赖 

npm install jquery --save-dev

3、在webpack.base.conf.js里加入

var webpack = require("webpack")

4、在module.exports的最后加入

  plugins: [new webpack.optimize.CommonsChunkPlugin(‘common.js‘), new webpack.ProvidePlugin({
    jQuery: "jquery",
    $: "jquery"
  })]

5、在main.js 引入

import $ from ‘jquery‘

6、然后重新 npm run dev  就可以了