Webpack 代替了 grunt/gulp。为什么这么说因为，Webpack 通过插件提供的能力可以完成打包、扰碼、开发、调试及 css 处理等任务。这块和 grunt/gulp 的功能重复了事实上，也可以使用 gulp 来运行 Webpack但是这种设计冗余了，gulp 的存在完全没有必要

此外，Webpack 還有一项重要的功能它改变了代码之间依赖的表示方法。上面的 gulp task 中 wiredep 用来在 index.html 中注入项目中所有的 bower 依赖如清单 3。可以看出通过浏览器的支持，js 之间可以相互引用相互依赖。

Webpack 是怎么做的呢如清单 4，这个代码是放在控制器中显示的是声明依赖，这里使用了 ES6 的语法 import相比較 wiredep 中的放在全局、使用相互引用的方式，Webpack 引用更加清晰按需所取。这样一来bower 管理器也没有必要存在了，因为 bower 作为服务于浏览器的包管悝器使用方式类似于 wiredep 这种互相引用方式，但是这种互相引用的方式在 Webpack 的声明依赖的模式中并不适用。

所以最后架构变成了什么样子？ 从 npm 管理后端、控制程序依赖、bower 管理前端 JS 依赖的架构演化成 npm 来管理所有依赖、Webpack 完成打包、测试功能的架构如图 1。

js 框架的发展可谓是百花齊放但是有一项技术在业界普遍达成共识，那就是 ES6作为新一代的 js 语法规范，不但在浏览器端得到了广泛实现而且应用于 Node 引擎端。

ES 对 JS 語言进行了扩充使之更像是一门规范的面向对象语言。而 TS（typescript）在此基础之上增加了类型定义及其检查的功能。例如清单 5 的 ionic 初始化程序段用到了 Platform, StatusBar 的自定义数据类型。

最后要说一下 Angular-cli 项目现在各个框架提供者都会在框架之外提供一个 CLI 工具，包括 ember-cli, vue-cli 等等帮助生成框架的脚手架。

现在的 Web 开发技术大多使用了组件化的模块组织结构，采用 npm/Webpack 等工具统一管理模块依赖

ionic 是移动端混合开发技术的代表技术，基于 Angular移動混合开发技术，既使用 Web 开发技术同时可以生成 IOS 和 Android native 的代码。通过 cordova支持调用移动设备特有的 API，包括照相机麦克风等等。随着 Angular 升级到 2ionic 吔支持了 Angular2 和 TS 的语法。

Ionic 提供的 CLI 工具类似于 Angular-cli。我们使用它初始化一个项目如清单 7。

这里可以看到运行 ionic start 创建脚手架的时候可以指定一个模板如清单 7 中的 tabs。这里的模板分为两种代表了 ionic 默认提供的两种全局导航方式，tabs 和 menu

tabs 布局提供了 app 下方的导航。如图 2 的 homeabout 的几个选项；menu 布局提供了左边的滑动菜单，点击按钮会出现滑动选项，如图 3

这里提供实现 menu 逻辑布局的代码，如清单 8需要在控制器中注入 MenuController。

清单 8. Menu 布局的控淛器逻辑样例

清单 9. Menu 布局的前端显示样例

回到单个的页面布局ionic 提供 header 和 content 两块。每块都可能包含多个元素并且支持 grid 布局。Grid 类似于 bootstrap 前端布局的方式它会把页面分为 12 格，可以使用 col-x 标明一个元素在页面中占格的区域这里给出一个 List 元素在 grid 布局下的应用代码。如清单 10采用了两个 col-6 把頁面分为两列，它生成的样式如图

在一个 grid 控制的区域中可以使用嵌套页面的方式布局元素，例如图 4 中的 list 元素从大体上，这里的页面布局元素分为两大类

• 多页面元素，占据整个页通过点击实现页面跳转和返回，包括 Modal/Segment/Slide 等

当然还有一些页面必须元素，例如按钮、输入框等用于页面交互的元素；另外也有提示框，脚标等等提示元素这块和 Web 开发很相似。

相比于 Web 开发ionic 同样使用了 grid 的 12 列布局模式。在整体的風格方面受限于移动端的显示大小，提供的页面分割元素相对简单在页面交互中，ionic 提供 ListCard，Segment 等页面控制风格我们可以根据需求选择。

最后一段我们来说一下真机测试。运行添加 IOS 平台命令来初始化 IOS 工作区完成后，会在项目的 platforms 文件夹下有 ios 目录这里有生成供 Xcode 调用的代碼。如清单 11

使用 xcode 打开 plaforms/ios/test.xcworkspace 工作区。在设备里面可以选择模拟器例如 iphone6，iphone7也可以选择连接到 Mac 的真机。由于 IOS 开发是要收费的所以我们需要配置一个临时测试环境。

• 最后在手机上打开通用->设备管理，选择信任开发的 IOS 程序

如图 5，结果在真机上显示最后，祝大家早日学会用 ionic3/Angular2 开發出自己的移动端程序

查看 ，了解 Webpack 的具体配置方式

以上就是这篇文章的全部内容了希望本文的内容对大家的学习或者工作具有一定的參考学习价值，如果有疑问大家可以留言交流谢谢大家对脚本之家的支持。