webpack 引入jq和jq插件_webpack 引入jq - CSDN
精华内容
参与话题
  • webpack4引入JQuery的两种方法

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

    非script标签的形式引入JQuery。

    安装JQuery:

    先安装加载器expose-loader,用于将插件暴露到全局中供其他模块使用:

    npm i expose-loader --save

    安装JQuery:

    npm install jquery --save

    以上两个模块也是项目发布依赖的模块,因此安装参数选择--save。

    如何使用:

    1.第一种方法:在打包入口文件中直接require并用expose-loader暴露$到全局

    打包入口文件./src/index.js中引入JQuery:

    require("expose-loader?$!jquery");

    在html文件中引入测试是否全局可用./dist/index.html:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="main.js"></script>
    </head>
    
    <body>
        <script>
    	    $(function() {
    	        console.log($("body"));
    	    })
        </script>
    </body>
    
    </html>

    打包会自动在./dist目录下生成main.js

    浏览器打开./dist/index.html文件在控制台得到输出结果。

    注:如果在js文件中直接使用var $ = require("jquery");引入$无法暴露到全局,只能在当前js文件中使用。

    2.第二种方法:在打包入口文件引入JQuery,在配置文件中暴露到全局

    项目根目录创建配置文件./conf/webpack.dev.js:

    const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        entry: "./src/index", //入口文件
        output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist"),
            filename: "main.js"
        },
        module: {
            rules: [
            	//暴露$和jQuery到全局
    	        {
    	            test: require.resolve('jquery'), //require.resolve 用来获取模块的绝对路径
    	            use: [{
    	                loader: 'expose-loader',
    	                options: 'jQuery'
    	            }, {
    	                loader: 'expose-loader',
    	                options: '$'
    	            }]
    	        }
            ]
        }
    }

    入口文件中./src/index.js引入jquery:

    require("jquery");

    测试文件./dist/html内容不变,打包:

     

    以上两种引入方式得到的效果一样,第一种引入方式更加简单

     

    展开全文
  • webpack如何全局引入jquery和插件?

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

    之前试过把jQuery打包进vendor,虽然$好用了,但是jQuery下的一系列插件就叫苦了。你想直接从html中引入jQuery的第三方插件?有点不可能,既然$算是webpack中的一个变量,那么你只能通过require的方式引入jQuery的第三方插件。第三方插件的结果只有两个,要不你就被打包引入你的js文件里,要不你就被引入vendor里。

     

    结果一:打包进引入的js文件里。如果多个js文件都引入了某个jQuery插件,那么就会出现很多重复的代码,冗余。

    结果二:打包进vendor里。如果都打包进一个vendor,那该文件得多大啊!自动手动配vendor?你知道哪个插件用到的次数多,哪个用到的少吗?麻烦

     

    后来我想,干脆第三方的插件我都不加入到webpack里,只有自己编写的代码用webpack来模块化就行了。第三方插件虽然都单独用了一个http请求,但它们改动不大,最终都会被浏览器缓存起来。

    于是,有以下几个需处理的事情:

    1、如何引入jQuery

    2、如何引入jQuery插件?

    3、如何引入不依赖jQuery的普通第三方插件?

     

    jQuery直接在html中引入,然后在webpack中把它配置为全局即可

    externals: {

    jquery: 'window.$'},

    使用则直接 require 进来,反正 webpack 也不会把它打包进来。

    var $= require('jquery');

    既然 $ 已经被设置为全局了,那么挂载在它下面的一系列 jQuery 插件就好办了,直接在 html 中引入。

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>

    js 中引入 jquery 直接使用即可。

    var $=require(jquery);

    $(#leftNav).nail();

    最后就是打包普通的第三方插件了。有两种方案,一种是直接用webpack打包到引用到插件的js里去,

    这种不用多说,直接引入就行。另一种则是像jQuery一样设置为全局变量,同样的方式引入与使用。

    externals: {

    artTemplate: 'window.template'},

    webpack没有requirejs的那种引入第三方插件然后可以忽悠打包的功能。所以我对于第三方的插件的做法就是以前该怎么引入就怎么引入,在webpack中设置一个全局即可


    参考博客:

    http://www.cnblogs.com/handoing/p/5866830.html

    https://www.zhihu.com/question/33448231

    https://segmentfault.com/a/1190000006000118


    展开全文
  • vue引入jquery报错 $ is not defined

    万次阅读 2018-06-11 20:33:01
    webpack.base.conf.js里加入 const webpack = require("webpack") 然后在module.exports的最后加入 plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack....

    在webpack.base.conf.js里加入

    const webpack = require("webpack")

    然后在module.exports的最后加入

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

    最后一定要重新npm run dev

    展开全文
  • nuxt引入第三方插件的方法 比如jQuery

    万次阅读 2020-07-27 23:34:44
    第一种 npm install --save jquery 先下下来 webpack的 jquery 然后 nuxt.config.js const webpack = require('webpack') module.exports = { build: { plugins: [ new webpack.ProvidePlugin({

    第一种  

     

    npm install --save jquery
    


    先下下来 webpack的  jquery 

     

    然后  nuxt.config.js

     

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


    然后页面上

     

     

    export default {
    		mounted () {
    		    $("body").append("1");
    		},


    第二种

     

    nuxt.config.js

     

    module.exports = {
    	head: {
    	    script: [
    	      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    	    ]
    	},


    当然  第二种 你可以直接写在 要引用的.vue页面

     

     

    好问题来了,自己写的 插件 或者网上轮播图插件   怎么集成进去,我来教下吧,还是不懂就只能进群来问我了,如果我有在线的话

    比如  我网上下了个 轮播图   

    你要把他放在 static的文件里面  因为  static是nuxt默认的存放类似不编译的 png图片 js的地方  ,放进去之后  

    你比如首页要引用,你就在首页加这么一段

     

    export default {
    		head: {
    		    script: [
    		      { src: 'js/move.js' }
    		    ],
    		    link: [
    		      { rel: 'stylesheet', href: 'css/zzsc.css' }
    		    ]
    		},


    恩,应该是可以了,

     

     

    好,点不点赞看你了,或者 可以加入 我的 群153181864  前端交流群 ,绝对原创,转载请附上 本微博链接。

    展开全文
  • 然后想在项目中自定义滚动条,舍弃浏览器原生滚动条,成熟的现成插件也只找到了jQuery的,所以不得不引入jQuery,下面介绍下jQuery的引入及其第三方插件引入引入jQuery通过npm安装依赖引入1、安装``` ...
  • vue-cli3引入jquery的不同

    千次阅读 2018-12-11 11:11:17
    npm install jquery --save vue-cli3 配置; 在vue.config.js中 module.exports = { ... new webpack.ProvidePlugin({ $:&quot;jquery&quot;, jQuery:&quot;jquery&quot;,...
  • 第一种,在模板页中用script标签引入jquery,不需要npm,在webpack.base中配置下面的忽略项,注意此种方式不能plugin插件形式同时使用, 此种方法优点是不需要npm安装,可以使用cdn链接,或者公司统一的版本,...
  • vue中如何引入jquery详解

    万次阅读 2018-05-18 17:50:34
    用vue-cli脚手架工具构建项目成功后 当需要引入JQ,可用以下方法: &nbsp;1.首先在package.json里的dependencies加入”jquery” : “^3.2.1”, 2.在终端里输入npm install jquery –save-dev&...
  • Webpack引入jquery及其插件的几种方法

    万次阅读 2017-05-24 18:07:57
    webpack引入jquery很困难,引入jquery插件更困难,本文提供了多种方法在webpack项目中引入jquery及其相关插件
  • vue引入jQ插件

    千次阅读 2018-09-18 19:27:56
    1.首先在package.json里加入,     "dependencies": { "vue": "^2.5.2", "vue-router"...3.在 webpack.base.conf.js 里加入 ...// 在开头引入webpack,后面的plugi
  • 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 ? 1 2 3 4 5 6 7 8 9 1
  • 闲来无事先写一篇博客,整合一下最近网上更新的资源,在用webpack构建VUE项目时会遇到仍旧想用jquery以及依赖jQuery的插件,但是引入jq会很麻烦,这里介绍一种比较简单使用的方法,使用expose-loader先简单介绍一下...
  • 引入jq模块 expose-loader 简单介绍 提供公共模块 tpl模版的介绍(使用ejs语法) 代码接着上一章webpack学习笔记(二)环境分离+多页面开发配置 引入jq模块 各种基于mvc、mvvm框架的出现,单纯的jq已...
  • webpack的ProvidePlugin配置

    万次阅读 2017-11-23 14:39:30
    webpack
  • webpack引入非模块化文件

    千次阅读 2018-09-30 17:00:24
    webpack引入非模块化js的方法: 比如我们要在webpack项目中引入 qrcodejs(生成二维码的插件),插件详细代码如下: 解决办法: 先安装 exports-loader 文件解析插件: npm install -D exports-loader npm...
  • 一、webpack使用ES6语法,第三方js可以引入通过import,可以通过npm 配置到项目中或者直接下再加入项目js文件中 首先无论require还是import,都不是webpack的发明,它们是已经存在于世的不同的模块化规范(目前都不...
  • vue-cli3.0如何引入jquery

    千次阅读 2019-12-17 11:42:51
    const webpack = require('webpack') const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) } module.exports = { baseUrl: './', devServer: { host: '...
  • vue脚手架引入JQ的方法

    千次阅读 2018-10-17 11:27:23
    在vue中引入jq 用vue-cli脚手架工具构建项目成功后 当需要引入JQ,可用以下方法:  1.首先在package.json里的dependencies加入"jquery" : "^3.2.1",   2.在终端里输入npm install jquery...
  • 1、安装webpack和loader 为什么要安装webpack? 因为我们要用到webpack的 expose-loader。当然,webpack的打包功能我们也要用到。 mkdir demo-webpack &amp;&amp; cd demo-webpack npm init cnpm install ...
  • Vue2.0 --- vue-cli脚手架中全局引入JQ

    千次阅读 2017-10-01 21:33:31
    在使用Vue过程中或许下有一些插件出现BUG或者因为一些插件只有JQ有,而不得不在Vue中引入JQ,那么下面就是JQ全局引入的方法 第一步:安装jQuerynpm/cmpn方式安装(默认安装1.7.X版本的JQ)npm/cnpm install jQuery如果...
1 2 3 4 5 ... 20
收藏数 747
精华内容 298
关键字:

webpack 引入jq和jq插件