preactjsへの移行

Question

私は、サーバ側がbabelで構築され、クライアントバンドルがwebpackで構築されている汎用の反応アプリを持っています。どのように

を

{ 
    "resolve": { 
    "alias": { 
     "react": "preact-compat", 
     "react-dom": "preact-compat" 
    } 
    } 
} 

しかし、構築した後、私はエラーを取得する：私はpreact-compactドキュメントを読んでいると、それはbabelを使用して構築するための.babelrcでこれを追加することを提案：

{ 
    "plugins": [ 
    [ 
     "transform-react-jsx", 
     { 
     "pragma": "h" 
     } 
    ], 
    [ 
     "module-resolver", 
     { 
     "root": [ 
      "." 
     ], 
     "alias": { 
      "react": "preact-compat", 
      "react-dom": "preact-compat" 
     } 
     } 
    ] 
    ], 
    "presets": [ 
    "react" 
    ] 
} 

とwebpack用普遍的な反応アプリの場合preactに移動

Answer 1

しかし、構築した後、私はエラーを取得する

を「時間が定義されていない」あなたはあなたのバベルの設定にtransform-react-jsxプラグインを追加しました。

["transform-react-jsx", { "pragma":"h" }] 

これは、JSXコードをトランスバイルする方法をバベルに伝えます。それが機能するには、関数hが有効である必要があります。つまり、JSXを使用するすべてのファイルでインポートする必要があります。あなたがbabel-plugin-module-resolverまたはWebPACKのいずれかで、正しくなかったとして代わりにリアクト使用するすべてのコードを変更することの

import { h } from 'preact'; 

、あなたは、preact-compatにpreact-compatとエイリアスreactとreact-domの両方を使用することができます。それでreactとreact-domをコードに使用し、preact-compatがあなたのために残ります。

動作させるには、["transform-react-jsx", { "pragma":"h" }]をあなたのバベルの設定から削除する必要があります。