如何设置grunt + browserify + tsify + babelify？

Question

我正在努力设置grunt + browserify + tsify + babelify（带调试）。

下面的gruntfile设置确实能够编译打字稿，但没有发生babel的转换。

有人可以让我知道如何做到这一点？ （我可能需要使用gulp来做到这一点??）

 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将目标设置为'es2015'。

Answer 1

问题是，grunt-browserify加载transforms first and then the plugins，所以你想要做的 - 把插件后面的转换 - 用声明性配置是不可能的。

但是，您可以使用grunt-browserifyconfigure功能和设置插件和改造里面说功能：

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'] 
      }); 
     } 
    } 
}