详解webpack 如何集成第三方js库

2024-10-24 04:04:09

webpack系列目录

webpack 系列二：webpack 介绍&安装

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

webpack 系列四：webpack 多页面支持 & 公共组件单独打包

webpack 系列五：webpack Loaders 模块加载器

webpack 系列六：前端项目模板-webpack+gulp实现自动构建部署

基于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"
}

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

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

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

6.在项目路径下，执行webpack 打包指令

$ webpack

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

$ webpack-dev-server

OK ,顺利集成

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

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 如何集成第三方js库

webpack系列目录 webpack 系列二:webpack 介绍&安装 webpack 系列三:webpack 如何集成第三方js库 webpack 系列四:webpack 多页面支持 & 公共组件单独打包 webpack 系列五:webpack Loaders 模块加载器 webpack 系列六:前端项目模板-webpack+gulp实现自动构建部署基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com
详解Webpack抽离第三方类库以及common解决方案

前端构建场景有两种,一种是单页面构建,另一种是多入口构建多页面应用程序(我视野比较小,目前就知道这两种),下面我们针对这两种场景总结了几种抽离第三方类库以及公共文件的解决方案. 如果有哪些地方优化不周到,请指点一二,另外求关注求星星,么么哒单页面构建: 常规配置 const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugi
详解webpack介绍&安装&常用命令

webpack系列目录 webpack 系列二:webpack 介绍&安装 webpack 系列三:webpack 如何集成第三方js库 webpack 系列四:webpack 多页面支持 & 公共组件单独打包 webpack 系列五:webpack Loaders 模块加载器 webpack 系列六:前端项目模板-webpack+gulp实现自动构建部署基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com
详解webpack 多页面/入口支持&公共组件单独打包

webpack系列目录 webpack 系列二:webpack 介绍&安装 webpack 系列三:webpack 如何集成第三方js库 webpack 系列四:webpack 多页面支持 & 公共组件单独打包 webpack 系列五:webpack Loaders 模块加载器 webpack 系列六:前端项目模板-webpack+gulp实现自动构建部署基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com
详解webpack+gulp实现自动构建部署

webpack系列目录 webpack 系列二:webpack 介绍&安装 webpack 系列三:webpack 如何集成第三方js库 webpack 系列四:webpack 多页面支持 & 公共组件单独打包 webpack 系列五:webpack Loaders 模块加载器 webpack 系列六:前端项目模板-webpack+gulp实现自动构建部署正文本篇包含以下三点: 1.区分开发环境和生产环境 2.集成gulp 3.package.json 配置前面主要介绍了w
详解webpack 打包文件体积过大解决方案（code splitting）

优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码问题: 开发环境用webpack后发现单个js文件
angular2中使用第三方js库的实例

本文以jquery 为例第一种:有对应的声明文件的 1.用命令安装jQuery的声明文件.(声明文件是为了ide完美智能提示) npm install -D @types/jquery 2.引入jquery import * as $ from 'jquery'; 3.使用 $('body').addClass(''); 第二种:没有声明文件,自定义的js库 1. index.html中引入 js 文件 <script src="/assets/jquery.min.js"&g
详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.
详解webpack之scss和postcss-loader的配置

本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **
详解webpack babel的配置

Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用首先

详解webpack 如何集成第三方js库

相关推荐

随机推荐