从angular1.x到angular2的一点实践（updated:2016-12-12）

[leopen-hu]

从angular1.x到angular2的一点实践

更新

• （2016-12-12）gulp工具流支持ES5和ES6同时翻译——兼顾新老代码

项目原状

• angular1.3，不支持component
• 没有使用CommJS/CMD/AMD等模块化方式
• 使用ES5

项目预期

• 使用ES6（是否使用TypeScript待评估）
• 模块化（支持ES6的import和export）
• angular1.x升级至angular2

  项目实践（不敢步子迈得太大）

• 从ES5到ES6

  • 引入babel到gulp工作流 。将后缀为.es6.js的文件在原目录下翻译成ES5格式的.js文件，运行或打包时忽略.es6.js文件；由于babel转义模块化会使用CommonJS,但是对于这一块的打包目前还没有怎么研究，所以暂时使用这种不彻底的方式，下文的代码是我同事所撸，对于gulp我还不是很熟；

    'use strict';
    const gulp = require('gulp');
    const babel = require('gulp-babel');
    const path = require('path');
    const conf = require('./conf');
    const rename = require("gulp-rename");
    gulp.task('babel', () => {
    return gulp.src([
    path.join(conf.paths.src, '/**/*.es6.js'),
    '!' + path.join(conf.paths.src, '/**/imports/**/*.es6.js')
    ])
    .pipe(rename(function(path) {
    path.basename = path.basename.replace(/\.es6/, '');
    }))
    .pipe(babel({
    presets: ['es2015'],
    plugins: [
    'external-helpers',
    ]}))
    .pipe(gulp.dest(conf.paths.src));
    });

  • 新的feature使用ES6语言开发，原有文件涉及改动时考虑重新使用ES6编写（暂不引入模块化），下以service为例，controller等类似，可以参考民工叔叔的博文《Angular 1.x和ES6的结合》；

    
    class VideoPlayerService {
    constructor($sce) {
    this.$http= $http;
    this.videoConfig = {
    showVideoPlayer: false,
    videoUrl: null
    };
    }

  post() { this.$http.post('url', data: {}}) .then(resp => resp.data, err => err); } }

  VideoPlayerService.$inject = ['$http'];

  angular.module('vwmsApp.newbieGuideModule') .service('videoPlayerService', VideoPlayerService);

• 引入模块化 正在和同事考虑使用browserfy或webpack来把require在打包的时候编译掉，这样就可以引入ES6的模块化了，把对于Angular1.x的依赖全部迁移到module文件中去。
• 迁移到angular2 这个估计需要一段时间，在前面实现的基础上，还要对template的代码进行改造，甚至一些自定义组件也还要花比较多的时间。在目前业务实现还有很多的情况下，只能循序渐进

[leopen-hu]

（2016-12-12）gulp工具流支持ES5和ES6同时翻译——兼顾新老代码

• 基于generator-gulp-angular这个项目的ES5和ES6整合，原项目没有使用require，也不打算引入require

• 主要思路：

  • 先使用babel翻译ES6，
  • 使用webpack打包屏蔽require带来的影响，
  • inject编译后的代码到html，
  • 生产打包，测试的原理与dev调试相同。

• 时间有限，主要代码如下：

  
  function webpackWrapper(watch, test, callback) {
  var webpackOptions = {
      watch: watch,
      module: {
          // 注释是因为要同时支持ES5和ES6,目前没有研究这个怎么配置格式化文件
          // preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader' }],
          loaders: [{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader?presets[]=es2015'] }]
      },
      output: { filename: 'index.module.js' }
  };
  
  if (watch) {
      webpackOptions.devtool = 'inline-source-map';
  }
  
  var webpackChangeHandler = function(err, stats) {
      if (err) {
          conf.errorHandler('Webpack')(err);
      }
      $.util.log(stats.toString({
          colors: $.util.colors.supportsColor,
          chunks: false,
          hash: false,
          version: false
      }));
      browserSync.reload();
      if (watch) {
          watch = false;
          callback();
      }
  };
  
  var sources = [
      path.join(conf.paths.src, '/app/**/*.js'),
      path.join('!' + conf.paths.src, '/app/**/lodop_print_template/js_templates/**/*.js'),
      path.join('!' + conf.paths.src, '/app/**/*.mock.js'),
      path.join('!' + conf.paths.src, '/app/**/*.e2e.js'),
      path.join('!' + conf.paths.src, '/app/data/*.js')
  ];
  
  if (!test) {
      sources = sources.concat([
          path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
          path.join('!' + conf.paths.src, '/app/**/*.spec.es6.js')
      ]);
  }
  
  return gulp.src(sources)
      .pipe($.babel({
          presets: ['es2015'],
          plugins: [
              'external-helpers',
          ]
      }))
      // 下一步很重要，对angular文件进行排序
      .pipe($.angularFilesort()).on('error', conf.errorHandler('AngularFilesort'))
      .pipe(webpack(webpackOptions, null, webpackChangeHandler))
      .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/app')));
  }

gulp.task('scripts', function() { return webpackWrapper(false, false); });

gulp.task('scripts:watch', ['scripts'], function(callback) { return webpackWrapper(true, false, callback); });

gulp.task('scripts:test', function() { return webpackWrapper(false, true); });

gulp.task('scripts:test-watch', ['scripts'], function(callback) { return webpackWrapper(true, true, callback); });

```javascript
gulp.task('inject', ['scripts', 'styles'], function() {
    var injectStyles = gulp.src([
        path.join(conf.paths.tmp, '/serve/app/**/*.css'),
        path.join(conf.paths.src, '/css/*.css'),
        path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
    ], { read: false });

    var injectScripts = gulp.src([
        path.join(conf.paths.tmp, '/serve/app/**/*.module.js')
    ], { read: false });

    var injectOptions = {
        ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
        addRootSlash: false
    };

    return gulp.src(path.join(conf.paths.src, '/*.html'))
        .pipe($.inject(injectStyles, injectOptions))
        .pipe($.inject(injectScripts, injectOptions))
        .pipe(wiredep(_.extend({}, conf.wiredep)))
        .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
});

• 遇到坑及解决办法：

  • 注入错误（混淆代码后），大部分是因为没有$injector；
  • 测试module()方法报错，解决办法：因为module方法不再全局，使用angular.mock.module();
  • 第三方库报错，解决方法：1.自己改写（好麻烦）； 2.使用(function(global)())(typeof global === "undefined" ? self : global)包裹；

• 欢迎大家来讨论如何让老代码和新代码共存的情况下更清晰合理。

[leopen-hu]

目前已从原公司离职，本文基本没有续更可能。