빌드 단계 없이 브라우저에서 직접 JSX를 테스트하는 방법
4295 단어 reactjsxjavascriptbabel
ES6 스타일로 작성된 React 구성 요소가 있고 babel을 변환하여 JSX을 구성한 다음 webpack을 번들로 구성하지 않고 브라우저에서 바로 테스트하고 싶을 때가 있습니까?같은 관심을 갖고 있다면 여기에 도움이 되는 몇 가지 단계가 있습니다.
먼저 다음과 같은 구조로 테스트 웹사이트 디렉토리를 생성합니다.
website
- index.html
- index.js
- Foo.js
Foo.js은 다음 내용을 포함하는 간단한 구성 요소입니다.
export default () => <div>Foo</div>;
index.js은 가져오기 및 렌더링에 관한 것입니다.import Foo from "./foo.js"; // can also use `foo`
ReactDOM.render(<Foo />, document.getElementById("root"));
index.html 이게 제일 중요해<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script
src="https://unpkg.com/react@16/umd/react.production.min.js"
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
></script>
</head>
<body>
<div id="root"></div>
<script
data-plugins="transform-es2015-modules-umd"
type="text/babel"
src="./foo.js"
></script>
<script
data-plugins="transform-es2015-modules-umd"
type="text/babel"
src="./index.js"
></script>
</body>
</html>
여기에 몇 가지 중요한 사항이 있습니다.
CDN을 통해
JSX 및 React + ReactDOM을 트랜스파일하기 위한 babel 스크립트를 포함해야 합니다.https://unpkg.com/babel-standalone@6/babel.min.js
https://unpkg.com/react@16/umd/react.production.min.js
https://unpkg.com/react-dom@16/umd/react-dom.production.min.js
다음으로
<script type="text/babel" /> 으로 감싸서 모듈을 등록하고, 다른 모듈에서 import 을 지원하려면 transform-es2015-modules-umd 을 더 추가하여 플러그인 data-plugins="transform-es2015-modules-umd" 을 사용해야 합니다. 이 경우 우리는 foo 모듈에서 index 모듈을 가져올 수 있도록 2개의 모듈 foo 및 index을 각각 등록합니다.그게 다야!
Reference
이 문제에 관하여(빌드 단계 없이 브라우저에서 직접 JSX를 테스트하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tmhao2005/how-to-test-jsx-directly-on-browsers-without-any-building-steps-2i94텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
