static/2021/ipu-bundle-sx

开发环境

• 系统：win10
• node.js：10.21.0
• npm：6.14.5
• 模块化语法：AMD（也可使用ES6模块化语法，修改的地方会稍多）

打包命令(在当前文件目录运行)

• 运行 npm install 安装环境依赖库(先运行此命令，才能执行下面命令，安装依赖包只需运行一次)
• 运行 npm run webpack 将框架js打包生成到dist/ipu-bundle.js，若要修改打包配置，如目录或打包文件名和全局变量名，则在webpack.config.js文件中修改自定义

目录说明

• demo目录：测试打包js插件调用
• src目录为需要打包的工程，目录结构可参考已有工程
  • source为js源文件，可与module对比，查看模块化改造代码变更的位置
  • module为source源文件模块化改造后对应文件，可比对两个目录查看怎么改造js
  • module/index.js 打包文件入口，定义需要暴露给外部使用的对象
• dist 打包文件生成目录
  

工程所需要文件说明

打包所需要的文件说明(因工程版本不同，文件位置可能差异)，未使用到的文件目录可删除，require-config.js作为参考保留

- ipu/mobile.js     // 框架功能js，适配浏览器，App环境通用api实现处理，在浏览器调用的是mobile-browser.js，在app环境调用的mobile-client.js
- ipu/wade-mobile（部分版本中名称可能为ipu/ipu-mobile.js）  // 框架插件对象，所有插件调用入口对象，核心插件定义
- ipu/mobile-client.js  // 框架通用功能App环境实现
- ipu/client-toolkit.js // 框架App环境常用通用功能封装，给mobile-client.js对象调用
- ipu/browser.js        // 框架通用功能浏览器环境实现
- ipu/browser-toolkit.js // 框架浏览器环境常用通用功能封装，给mobile-browser.js对象调用
- ipu/expand-mobile.js  // 扩展插件对象上的插件功能
- ipu/jcl.js            // 基于Zepto.js上扩展，添加了DataMap与DatasetList对象
- ipu/lib/zepto/zepto.min-1.1.6.js  // zepto对象，第三方库
- biz/js/common/biz-mobile.js   // 业务项目使用插件定义
- biz/js/common/common.js       // 通用业务封装，根据需要选择是否将此文件打包
- ipu/base64.js         // wade-mobile.js有依赖base64.js，但是代码中未使用此模块，可以不依赖

模块化修改

• define定义，修改依赖模块文件路径为相对或完整路径
• define修改为import ``` // 原代码 define(["wadeMobile","mobileClient","mobileBrowser"],function(WadeMobile,MobileClient,MobileBrowser){

// AMD修改（注意路径变化为文件相对路径) define(["./wade-mobile","./mobile-client","./mobile-browser"],function(WadeMobile,MobileClient,MobileBrowser){

- 其它细节可目录中已有代码的改造，比对src目录与module目录即可

###### 打包核心库文件
- zepto.js：工具库
- jcl.js：zepto基础上扩展库以支持框架功能，依赖zepto.js
- expand-mobile.js：插件扩展
- biz-mobile.js：项目插件扩展
- wade-mobile.js：核心插件库和插件入口，依赖jcl.js，expand-mobile.js，biz-mobile.js

##### 打包文件使用
- 引入ipu-bundle.js文件，通过全局变量ipu访问暴露的模块或对象，在module/index.js中自定义暴露的模块和模块名
- ipu.WadeMobile/IpuMobile 调用插件主要对象
- ipu.jcl 工具类

// 调用插件例子 ipu.WadeMobile.getSysInfo(function (info) { // 部分js版本中IpuMobile的名称为WadeMobile alert('产品名称：' + info); }, 'PRODUCTNAME'); ```

测试验证打包文件

• 修改demo目录文件中index.html文件引入打包文件路径
• 在本地启动一个web http服务，能访问到此页面
• 手机打开ipu秀，进入：更多 -> 模拟Browser
• 在界面输入框中输入demo页面地址，点测试，加载测试页面后，手机中能正常调用到插件即为ok