webpack 集成 jQuery 和 Avalon

時間 2019-11-12

標籤 webpack 集成 jquery avalon 欄目 JQuery 简体版

原文原文鏈接

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

webpack系列目錄css

本系列並不是所有原創，如非原創，正文篇首會註明轉載地址html

基於webpack搭建純靜態頁面型前端工程解決方案模板，最終形態源碼見github: https://github.com/ifengkou/webpack-template前端

正文

本篇主要介紹如何集成經常使用的js庫，以avalon 和jquery 爲例，同理可擴展到其餘js庫。更高級的功能見後續文章。更高級的功能見後續文章node

avalon 是國內的一個輕量級 MVVM js框架，只是以此爲例並不只限於它jquery

集成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版本到項目中：webpack

avalon.js 支持IE6+ 和現代瀏覽器
avalon.modern.js 合適於IE10+ 和HTML5 標準瀏覽器
avalon.mobile.js 支持移動設備（增長了Touch Event，Pointer，Event，fastclick）

基礎結構和準備工做

首先得安裝上npm，再其次安裝webpackgit

npm install webpack -g

新建項目，項目的目錄結構說明github

.
├── 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 installweb

{
  "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

下載的avalon.shim.js 放到 src/js/lib 下（同理jquery，zepto）npm
在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"
}

配置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: '/'
    }
}

新增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>

新增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")