如何将tsx与snabbdom-jsx（不是React）一起使用？

Question

我发现的所有文档都解释了如何将TypeScript与React一起使用，但我有兴趣将它与snabbdom-jsx一起使用？有关如何配置tsconfig以使其工作的任何想法吗？

关于使用babel的 snabbdom-jsx 文档：

  

顶部的/ ** @jsx html * / pragma告诉Babel使用html函数而不是React.createElement默认值。 html函数接受从Babel传递的参数，并按照Snabbdom的补丁函数生成虚拟节点。

是否有类似于TypeScript的@jsx html配置的内容？

Answer 1

  

顶部的/ ** @jsx html * / pragma告诉Babel使用html函数而不是React.createElement

     

是否有类似于TypeScript的@jsx html配置？

是。它的reactNamespace。例如。 reactNamespace foo然后获得foo.createElement。您可以使用它来创建foo.createElement = someOhterLibMethod以使其适用于任何内容。

更多

https://basarat.gitbooks.io/typescript/content/docs/jsx/tsx.html

alm

也支持

Answer 2

这是我的工作gulp文件，它将.tsx转换为snabbdom虚拟dom。

跳过/ ** @jsx html * / pragma并导入不在TypeScript 2中工作的{html}。

gulp.task('default', function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: [paths.tsadmin],
        cache: {},
        packageCache: {},
        plugin: [tsify]
    })
        .transform('babelify', {
            extensions: [".tsx", ".ts", ".js", ".jsx"]
        })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.webroot + '/js'));
});

.babelrc文件。

{
            "presets": [
                "es2015"
            ],
            "plugins": [
                "syntax-jsx",
                [
                    "transform-react-jsx",
                    {
                        "pragma": "bsj.html"
                    }
                ],
                [
                    "jsx-pragmatic",
                    {
                        "module": "snabbdom-jsx",
                        "import": "bsj"
                    }
                ]
            ]
        }