webpack写jquery插件的环境配置

2024-09-28 14:40:52

客户需求要一个具备树结构、带复选框的下拉选择控件；在网上找到了select2、autocomplete都不满足要求。于是自己用ztree加bootstrap dropdown组合开发了一个下拉树选择控件。决定用webpack打包，开发一个完整的jquery控件，顺便系统的学习一下webpack。

目录结构：

package.json配置：

{
 "name": "select-tree",
 "version": "0.0.1",
 "description": "下拉树形选择，带复选框",
 "license": "MIT",
 "author": "kaikai",
 "repository": "https://gitee.com/hkgit/select-tree",
 "scripts": {
  "start": "webpack --watch",
  "build": "webpack --config webpack.config.js"
 },
 "dependencies": {
  "jquery": "~1.12.4",
  "bootstrap": "^3.3.7",
  "jquery-slimscroll": "latest",
  "ztree": "latest"
 },
 "devDependencies": {
  "css-loader": "^0.28.7",
  "html-webpack-plugin": "^2.30.1",
  "style-loader": "^0.19.1",
  "uglifyjs-webpack-plugin": "^1.1.4",
  "webpack": "^3.10.0"
 },
 "bugs": {
  "url": "https://gitee.com/hkgit/select-tree/issues"
 },
 "keywords": [
  "javascript",
  "select",
  "tree",
  "checkbox"
 ]
}

说明：jquery用1.12的版本是为了兼容IE9浏览器，开发环境用的webpack's Watch Mode，由于项目比较小，调试就直接用chrome打开dist/select-tree.html文件。

webpack.config.js代码：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {
    vendor: ['jquery'], // 把需要引入的插件单独分出一个入口，和插件主体分开
    main: './src/select-tree.js'
  },
  output: {
    filename: 'select-tree-min.js',
    path: path.resolve(__dirname, './dist'),
    library: 'selectTree', // 插件名称
    libraryTarget: 'umd' // 插件支持CommonJS2，CommonJS，amd，var
  },
  // resolve: { // npm下载的jquery不需要制定路径
  //   modules: [path.join(__dirname, "node_modules")],
  //   alias: {
  //     jquery: 'jquery/dist/jquery.js'
  //   }
  // },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({ // 自动生成html
      template: './src/select-tree.html',
      filename: 'select-tree.html'
    }),
    new UglifyJSPlugin({ // 压缩代码
      sourceMap: true
    }),
    new webpack.optimize.CommonsChunkPlugin({ // 单独打包jq插件，此插件的依赖库单独抽出来，不影响插件的开发
      name: "vendor",
      filename: "vendor.min.js"
    }),
    new webpack.ProvidePlugin({ // 自动加载jq
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],
  devtool: 'source-map' // 方便调试
};

说明：重点在output.library和output.libraryTarget

以上就是我们给大家整理的本篇文章的全部内容，如果大家还有任何明白的地方可以在下方的留言区域讨论，感谢对我们的支持。

详解webpack3如何正确引用并使用jQuery库

经过百度.谷歌.SF.stackoverflow后终于将webpack3引用jQuery的问题解决了,网上的重复文章太多,大多也都过时了,webpack这两年发展也非常快,大多都是1.0版本的文章,与时俱进的很少,刚刚看了一眼现在已经发展到3.5.5了,真正看其中一篇文章能解决问题的几乎没有,下面是webpack3的实现代码. 首先在配置页面中加入外部引用 externals: { jquery: "jQuery" //如果要全局引用jQuery,不管你的jQuery有没有支持模块化,
jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position
webpack中引用jquery的简单实现

1.首先需要添加项目中jquery的依赖 npm install jquery --save-dev 2.参考配置代码: var webpack = require("webpack"); var path = require("path"); module.exports = { entry:{ home:"./src/js/home.js", -- }, output:{ path:__dirname+"/dist/js"
Webpack+Vue如何导入Jquery和Jquery的第三方插件

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(
webpack写jquery插件的环境配置

客户需求要一个具备树结构.带复选框的下拉选择控件:在网上找到了select2.autocomplete都不满足要求.于是自己用ztree加bootstrap dropdown组合开发了一个下拉树选择控件.决定用webpack打包,开发一个完整的jquery控件,顺便系统的学习一下webpack. 目录结构: package.json配置: { "name": "select-tree", "version": "0.0.1",
写JQuery插件的基本知识

普及JQuery知识知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义与调用: 复制代码代码如下: /* $.extend 定义与调用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
10分钟学会写Jquery插件实例教程

有很多朋友都用过jquery插件,但是很少有人自己动手写过jQuery插件,本文就以实例形式简单叙述了jQuery插件的实现方法.分享给大家供大家参考之用.具体方法如下: 具体而言,其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍. 现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正
写jQuery插件时的注意点

写好jQuery插件,有一些注意的地方(持续添加). 支持UMD 现在前端开发讲究模块化,所以jQuery插件也最好能够兼顾模块化. 模块化模式大概有几种: AMD.CommonJs.UMD. AMD(Asynchronous Module Definition) 异步模块定义,可以异步的加载或依赖其他模块,支持的库如 Require.js, Sea.js . 例子: // xxx-plugin.js define(['jquery'], function ($) { function myFu
自己动手手写jQuery插件总结

jQuery是继Prototype之后的又一款优秀的JavaScript框架,深受广大开发者热爱,用户甚广.而jQuery一个很好的地方在于用户的自定义,即我们可以书写自己的插件来完善jQuery的各项功能,定制自己所需要的功能,剔除冗余的代码,在页面加载时候可以有一定程度上的提升. 面试之后,触动很大,就是你要做的是一个了解十项还是精通一项的开发者?于是花了几天时间苦逼的研读jQuery源码,了解了jQuery的事件机制.选择器以及浏览器兼容性是如何做到的等.之后就一直想要书写一款jQue
不定义JQuery插件不要说会JQuery

一.导言有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二.普及JQuery知识知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuer
jQuery插件扩展extend的简单实现原理

相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码. 本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的.(大牛可以出门右拐......) 我们可以模拟创建一个迷你jQuery. var $ = {
跟我一起学写jQuery插件开发方法（附完整实例及下载）

很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:"嗨,美女,用这个吧.这是我写的一个jQuery插件."我想基本上你的人生大事就能很快解决. 先想好做个什么功能这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还
打造自己的jQuery插件入门教程

本文实例讲述了打造自己的jQuery插件的方法.分享给大家供大家参考,具体如下: 写js插件并不麻烦,js插件有两类,类型插件和对象插件.首先举例: $.post(url); 这个是类型插件,换句话说该插件在调用的时候不需要指定对象.那么: $('p').click(); 这个是对象插件,也就是说使用该插件的时候需要指定对象. 在写jQuery插件的时候,都是有固定的模板: jQuery.plugin1 = function(text) { alert(text); };//类型级别框架,类似
jquery 插件学习（四）

针对上面的示例,我们可以调用jquery.fn.extend()方法来创建jquery对象方法.具体代码如下> 复制代码代码如下: jQuery.fn.extend({ test : function(){ return this.each(function(){ alert(this.nodeName); }) } }); 调用跟上面一样哦复制代码代码如下: $('body *').click(function(){ $(this).test().html(this.nodeName).

webpack写jquery插件的环境配置

相关推荐

随机推荐