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

【问题标题】：How can I use tsx with snabbdom-jsx (not React)?如何将 tsx 与 snabbdom-jsx（不是 React）一起使用？
【发布时间】：2016-10-26 20:31:34
【问题描述】：

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

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

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

是否有与此 @jsx html TypeScript 配置等效的东西？

【问题讨论】：

这个运气好吗？我也有兴趣让 snabbdom（或另一个轻量级虚拟 DOM）与 TypeScript 中的 JSX 连接 - 最好使用 --jsx=react 并且不使用 React typedef。

标签： typescript jsx

【解决方案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也支持

【讨论】：

【解决方案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"
                    }
                ]
            ]
        }

【讨论】：

更多