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

时间:2016-10-21 17:57:45

标签: gruntjs browserify babel tsify

我正在努力设置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”。

1 个答案:

答案 0 :(得分:2)

问题是grunt-browserify加载了transforms first and then the plugins,所以你想要做什么 - 在插件之后放置转换 - 使用声明性配置是不可能的。

但是,您可以使用grunt-browserify configure函数并设置插件并在所述函数内部进行转换:

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