wie man grunt + browserify + tsify + babelify einrichtet?

Question

Ich habe Schwierigkeiten, grunt + browserify + tsify + babelify (mit Debug) einzurichten.

Die folgende Grunfile-Einstellung kompiliert Typoskript, aber es findet keine Babel-Umlagerung statt.

Kann mir jemand sagen, wie man das macht? (I Möglicherweise muß Schluck verwenden, um dies zu tun ??)

 browserify: { 
     main: { 
      src: 'app/scripts/main.ts', 
      dest: 'app/scripts/bundle.js', 
     }, 
     options: { 
      browserifyOptions: { 
       plugin: [['tsify']], 
       transform: [['babelify', {presets: ['es2015'], extensions: ['.ts']}]], 
       debug: true 
      } 
     } 
    } 

tsconfig.json hat Ziel auf 'es2015'.

Answer 1

Das Problem ist, dass grunt-browserify lädt die transforms first and then the plugins, also was Sie tun möchten - setzen Sie die Transformation nach dem Plugin - ist nicht mit einer deklarativen Konfiguration möglich.

Sie können jedoch die grunt-browserifyconfigure Funktion verwenden und das Plugin einrichten und Transformation innerhalb der Funktion:

browserify: { 
    main: { 
     src: 'app/scripts/main.ts', 
     dest: 'app/scripts/bundle.js', 
    }, 
    options: { 
     browserifyOptions: { 
      debug: true 
     }, 
     configure: function (bundler) { 

      bundler.plugin(require('tsify')); 
      bundler.transform(require('babelify'), { 
       presets: ['es2015'], 
       extensions: ['.ts'] 
      }); 
     } 
    } 
}