如何设置 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-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']
            });
        }
    }
}

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

how to set up grunt + browserify + tsify + babelify?

gruntjs

browserify

babeljs

tsify