figchat

아래는 위젯을 실행하는 단계입니다. 다음에서 지침을 찾을 수도 있습니다.

https://www.figma.com/widget-docs/setup-guide/

이 위젯 템플릿은 JavaScript 응용 프로그램을 만드는 데있어 두 가지 표준 도구 인 TypeScript와 NPM을 사용합니다.

먼저 NPM과 함께 제공되는 Node.js를 다운로드하십시오. 이렇게하면 TypeScript 및 기타 라이브러리를 설치할 수 있습니다. 다운로드 링크를 여기에서 찾을 수 있습니다.

https://nodejs.org/en/download/

다음으로 TypeScript, EsBuild 및 최신 유형 정의를 실행하여 설치합니다.

NPM 설치

JavaScript에 익숙하다면 TypeScript는 매우 친숙해 보입니다. 실제로 유효한 JavaScript 코드는 이미 유효한 TypeScript 코드입니다.

TypeScript는 변수에 유형 주석을 추가합니다. 이를 통해 Visual Studio Code와 같은 코드 편집기는 코드를 작성하는 동안 Figma API에 대한 정보를 제공 할 수있을뿐만 아니라 이전에는 눈에 띄지 않은 버그를 찾는 데 도움이됩니다.

자세한 내용은 https://www.typescriptlang.org/를 방문하십시오.

TypeScript를 사용하려면 브라우저가 실행 되려면 TypeScript (Widget-Src/Code.tsx)를 JavaScript (dist/code.js)로 변환하는 컴파일러가 필요합니다. 우리는 Esbuild를 사용하여 우리를 위해 이것을합니다.

Visual Studio 코드를 사용하여 TypeScript 코드를 작성하는 것이 좋습니다.

1. 아직 https://code.visualstudio.com/을 사용하지 않은 경우 Visual Studio Code를 다운로드하십시오.
2. Visual Studio Code 에서이 디렉토리를 엽니 다.
3. JavaScript로 TypeScript를 컴파일하십시오 : "터미널> 빌드 작업 ..."메뉴 항목을 실행 한 다음 "NPM : Watch"를 선택하십시오. 비주얼 스튜디오 코드를 다시 열 때마다 다시해야합니다.

그게 다야! Visual Studio Code는 저장할 때마다 JavaScript 파일을 재생합니다.