preactjs로 마이 그 레이션

Question

나는 서버 측이 바벨 (babel)로 만들어지고 클라이언트 번들이 webpack에 빌드되는 범용 반응 애플 리케이션을 가지고 있습니다. 나는 preact-compact 문서를 읽고 그리고 babel 사용하여 구축 .babelrc이 추가로 제안 :

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

그리고 webpack을 위해 :

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

을하지만, 구축 후 나는 방법 오류

를 얻을 수 보편적 인 반응 애플 리케이션을 위해 preact로 이동

Answer 1

는 그러나 구축 후 나는 오류

당신은 당신의 바벨의 설정에 transform-react-jsx 플러그인을 추가 "시간이 정의되지 않은"을 얻는다.

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

이것은 JSX 코드를 Transil하는 방법을 바벨에게 알려줍니다. 이 기능을 사용하려면 h 함수가 범위에 있어야합니다. 즉, JSX를 사용하는 모든 파일에서 해당 함수를 가져와야합니다. 당신이 babel-plugin-module-resolver 또는 웹팩과 하나 제대로처럼 대신 반작용 사용하는 모든 코드를 변경해야하는

import { h } from 'preact'; 

, 당신은 preact-compat에 preact-compat 및 별칭 react 및 react-dom를 모두 사용할 수 있습니다. 이를 통해 코드에 react 및 react-dom을 사용할 수 있으며 preact-compat이 나머지 작업을 수행합니다.

작동 시키려면 바벨 설정에서 ["transform-react-jsx", { "pragma":"h" }]을 제거해야합니다.