利用Angular2 + Ionic3开发IOS应用实例教程(2)

日期：2020-05-11 栏目：程序人生浏览：次

//gulpfile.babel.js
  gulp.task('bower', function () {
  return gulp.src(paths.views.main)
  .pipe(wiredep({
  directory: yeoman.app + '/bower_components'
  }))
  .pipe(gulp.dest(yeoman.app));
  });

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

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

清单 3. Wiredep 注入引用的 js 文件

<!-- build:js(.) scripts/vendor.js -->
  <!-- bower:js -->
  <script  src="bower_components/jquery/dist/jquery.js"></script>
  <script
  src="bower_components/jquery-ui/jquery-ui.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script  src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:js(app) scripts/scripts.js -->
  <!-- 3rd party packages should lay before scripts in projects-->
  <script src="build-scripts/app.js"></script>
  <script src="build-scripts/controllers/main.js"></script>
  <script
  src="build-scripts/controllers/task/management.js"></script>
  <script
  src="build-scripts/controllers/label/management.js"></script>
  <script
  src="build-scripts/controllers/system/management.js"></script>
  <!-- endbuild -->

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

清单 4. Angular2 中的 JS 相互引用

import { AboutPage } from '../pages/about/about';
  import { ContactPage } from '../pages/contact/contact';
  import { HomePage } from '../pages/home/home';
  import { TabsPage } from '../pages/tabs/tabs';

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

利用Angular2 + Ionic3开发IOS应用实例教程(2)

相关推荐