webpack 系列 三：webpack 如何集成第三方js库

webpack系列目录

本系列并非全部原创，如非原创，正文篇首会注明转载地址

基于webpack搭建纯静态页面型前端工程解决方案模板， 最终形态源码见github: https://github.com/ifengkou/webpack-template

正文

本篇主要介绍如何集成常用的js库，以avalon 和jquery 为例，同理可扩展到其他js库。更高级的功能见后续文章。更高级的功能见后续文章

avalon 是国内的一个轻量级 MVVM js框架，只是以此为例 并不仅限于它

集成avalon

由于项目用到了Avalon这个MVVM框架，webpack是兼容多种类型的加载器(AMD,CMD)，平常用的avalon.js是自带加载器，用webpack打包时avalon，只能选用avalon的shim无加载器版本，而avalon 目前只有1.4有shim的版本，且不能通过npm install，所以只好到github 下载shim版本的avalon。其中avalon1.4 有3个version，可以根据项目需要下载相应的shim版本到项目中：

  • avalon.js 支持IE6+ 和现代浏览器
  • avalon.modern.js 合适于IE10+ 和HTML5 标准浏览器
  • avalon.mobile.js 支持移动设备（增加了Touch Event，Pointer，Event，fastclick）

基础结构和准备工作

首先得安装上npm，再其次安装webpack

npm install webpack -g

新建项目，项目的目录结构说明

.

├── package.json              # 项目配置

├── src                       # 源码目录

│   ├── pageA.html                # 入口文件a

│   ├── pageB.html                # 入口文件b

│   ├── css/                  # css资源

│   ├── img/                  # 图片资源

│   ├── js                    # js&jsx资源

│   │   ├── pageA.js              # a页面入口

│   │   ├── pageB.js              # b页面入口

│   │   ├── lib/              # 没有存放在npm的第三方库或者下载存放到本地的基础库，如jQuery、Zepto、avalon

│   ├── pathmap.json          # 手动配置某些模块的路径，可以加快webpack的编译速度

├── webpack.config.js         # webpack配置入口

新建package.json文件，复制以下内容执行npm install

{

  "name": "webpack-template",

  "version": "1.0.0",

  "description": "webpack-template"

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "sloong",

  "license": "MIT",

  "devDependencies": {

    "css-loader": "^0.21.0",

    "file-loader": "^0.8.5",

    "style-loader": "^0.13.0",

    "url-loader": "^0.5.7",

    "webpack": "^1.13.1",

    "webpack-dev-server": "^1.14.1"

  }

}

集成Avalon

  1. 下载的avalon.shim.js 放到 src/js/lib 下（同理jquery，zepto）

  2. 在src目录下增加 pathmap.json，手动配置某些模块的路径，可以加快webpack的编译速度

{

	"avalon": "js/lib/avalon.shim.js"

}

备注：其他依赖js模块同理，例如：avalon + jquery(或者zepto等等)

{

    "jquery": "js/lib/jquery-1.12.4.js",

    "avalon": "js/lib/avalon.shim.js"

}
  1. 配置webpack.config.js
var webpack = require("webpack");

var path = require("path");

var pathMap = require('./src/pathmap.json');

var srcDir = path.resolve(process.cwd(), 'src');

var nodeModPath = path.resolve(__dirname, './node_modules');

module.exports = {

    entry: "./src/js/index.js",//入口js，可为数组

    output: {

        path: path.join(__dirname, "dist"),

        filename: "bundle.js"

    },

    module: {

        loaders: [

            {test: /\.css$/, loader: 'style-loader!css-loader'}

        ]

    },

    resolve: {

        extensions: ['.js',"",".css"],

		root: [srcDir,nodeModPath],

        alias: pathMap,

		publicPath: '/'

    }

}
  1. 新增index.html,引用了 dist/bundle.js（webpack 会解析入口文件index.js,将依赖项全部打包到bundle.js中）
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>test avalon</title>

</head>

<body>

<div ms-controller="avalonCtrl">

    <h1>{{name}}</h1>

</div>

<script src="../dist/bundle.js"></script>

</body>

</html>
  1. 新增index.js。需要用哪个js库，就require('3rd-jslib')进来，webpack会将根据依赖项将所需的lib库打包到目标js文件中
var avalon = require('avalon');

avalon.define({

    $id: "avalonCtrl",

    name: "Hello Avalon!"

});

//jquery 测试

var $ = require("jquery")

$("<div>这是jquery生成的</div>").appendTo("body")
  1. 在项目路径下，执行webpack 打包指令
$ webpack

  1. 启动webpack-dev-server,访问http://localhost:8080/webpack-dev-server/src/index.html
$ webpack-dev-server

OK ,顺利集成

webpack 集成 jQuery 和 Avalon的更多相关文章

  1. vue-cli webpack 引入jquery

    首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install 在webpack.base.conf. ...

  2. webpack+react+jquery和jquery插件

    要引入jquery插件 全局引入jquery plugins : [new webpack.ProvidePlugin({ $: 'jquery', jQuery:'jquery' "win ...

  3. webpack 引用 jquery + bootstrap 报错解决

    webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...

  4. webpack 添加 jquery 插件

    webpack.base.config.js 加入以下配置: , plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery ...

  5. mydate97时间插件集成jquery插件

    1.初始化JS: //把mydate97时间插件集成jquery插件 (function ($) { $.fn.mydatePicker = function (options) { return t ...

  6. Vue中引入jquery方法 vue-cli webpack 引入jquery

    在vue-cli 生成的工程中引入了jquery(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2 ...

  7. webpack配置Jquery全局包及全局包插件

    一:在配置文件配置: plugins: [ //将来以template为模版,生成一个index.html并且发布到webpack-dev-server开启的node服务器上面去 new HtmlWe ...

  8. vue+webpack 引入jquery

    1 首先 cnpm install jquery:这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/ ...

  9. vue webpack添加jQuery

    ---恢复内容开始--- 在webpack.prod.conf.js文件中,找到plugins new webpack.ProvidePlugin({ $: "jquery", j ...

随机推荐

  1. Firefox及我使用的firefox扩展

    什么数字安全浏览器,什么极速浏览器,现在都取代不了Firefox在我心中的位置.你想想,一款浏览器老是弹呀弹的,时不时问我换不换桌面,问我请不清理垃圾,真是的,这些关它浏览器鸟事. 喜欢Firefox ...

  2. kendo datetimepicker

    @(Html.Kendo().DatePicker() .Name("yearCalendar") .Value(DateTime.Now) .Start(CalendarView ...

  3. mysql表空间文件

    1.共享表空间文件.默认表空间文件是ibdata1,大小为10M,且可拓展.共享表空间可以由多个文件组成,一个表可以跨多个文件而存在,共享表空间的最大值限制是64T. 2.独立表空间文件.独立表空间只 ...

  4. linux常用命令：netstat 命令

    netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...

  5. 简单理解offsetleft、offsetTop、offsetParent

    先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...

  6. php ci 报错 Object not found! The requested URL was not found on this server. If you entered the URL manually please check

    Object not found! The requested URL was not found on this server. The link on the referring page see ...

  7. org.apache.catalina.core.StandardWrapperValve invoke的解决办法

    org.apache.catalina.core.StandardWrapperValve invoke的解决办法 比较容易错的地方是页面带参数进行跳转,由于跳转之后的页面本身也要执行一部分sql语句 ...

  8. mysql-innodb的事务日志

    [参考书籍:mysql技术内幕 INNODB存储引擎][参考了一些博客内容] 事务的隔离性由锁机制来实现,事务的原子性,一致性,持久性通过INNODB的redo log和undo log来完成. re ...

  9. SNMP学习笔记之Centos7配置SNMP服务

    0x00 安装yum源安装SNMP软件包 1.yum源安装SNMP服务: yum -y install net-snmp net-snmp-utils 2.查看SNMP版本号: snmpd -v 0x ...

  10. 20145305 《网络对抗》逆向及Bof基础实践

    逆向及Bof基础实践说明 实践说明地址 实验过程及结果截图