이것은 현대적인 도구로 2021 년에 TypeScript 프로젝트를 시작하기 위한 가이드입니다.
이 가이드의 수동 설정 대신 예제 저장소를 사용할 수 있습니다.
git clone https://github.com/metachris/typescript-boilerplate.git기본 프로젝트 설정
기본 설정은 다음 4 단계로 구성됩니다.
참고 :이 가이드에서는 yarn을 사용하지만 npm을 선호하는 경우 유사한 명령이 있습니다.
# Create project folder
mkdir my-project
cd my-project
# Create source folder and files
mkdir src
touch src/main.ts src/main.test.ts src/cli.ts
# Create a package.json
yarn init
# Install TypeScript, linter and Jest
yarn add -D typescript @types/node ts-node
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D jest ts-jest @types/jest
# Get a .gitignore
wget https://raw.githubusercontent.com/metachris/typescript-boilerplate/master/.gitignore
# Get a tsconfig.json with some defaults (adapt as needed)
wget https://raw.githubusercontent.com/metachris/typescript-boilerplate/master/tsconfig.json
# Alternatively you can create a fresh tsconfig.json (with extensive docstrings)
tsc --init
# Get a .eslintrc.js
wget https://raw.githubusercontent.com/metachris/typescript-boilerplate/master/.eslintrc.js
# Get a jest.config.json, for ts-jest to run the tests without a separate typescript compile step
wget https://raw.githubusercontent.com/metachris/typescript-boilerplate/master/jest.config.js
# Create a git repo and make the first commit
git init
git add .
git commit -am "initial commit"명령 줄에서 실행되는 코드에는 src/cli.ts를 사용하세요. 이렇게 하면 진입점 코드를 실행하지 않고도 main.ts의 코드를 포함 할 수 있으며 교차 대상 빌드 및 코드 분기 (예 : Node.js 및 브라우저)가 더 쉬워집니다.
package.json에 스크립트를 추가합니다.
{
"scripts": {
"cli": "ts-node src/cli.ts",
"test": "jest",
"lint": "eslint src/ --ext .js,.jsx,.ts,.tsx",
"build": "tsc -p tsconfig.json",
"clean": "rm -rf dist build",
"ts-node": "ts-node"
}
}이제 yar cli, yarn test, lint yarn, build yarn 및 ts-node yarn <filename>을 실행할 수 있습니다.
? Visual Studio Code에서 빌드 및 테스트 작업을 사용하여 키보드 바로 가기로 스크립트를 시작할 수 있습니다. 명령 팔레트에서 "기본 빌드 작업 구성"및 "기본 테스트 작업 구성"(VS Code 문서 참조).
Jest로 테스트
다음과 같이 Jest 테스트를 작성할 수 있습니다.
import { greet } from './main'
test('the data is peanut butter', () => {
expect(1).toBe(1)
});
test('greeting', () => {
expect(greet('Foo')).toBe('Hello Foo')
});실 테스트로 테스트를 실행하면 별도의 컴파일 단계가 필요하지 않습니다.
esbuild
esbuild는 TypeScript 코드의 많은 부분을 컴파일 할 수 있는 매우 빠른 JavaScript 번들러입니다. 이를 사용하여 Node.js와 브라우저 모두를 번들로 사용할 수 있습니다. esbuild는 아직 비교적 젊고 활발한 개발 단계에 있습니다. GitHub의 esbuild도 참조하십시오.
tsc 외에 esbuild를 사용하는 이유는 무엇입니까? TypeScript 컴파일러는 브라우저 용으로 잘 번들링 되지 않으며 (개발자는 일반적으로 웹팩, 소포 또는 롤업과 같은 추가 번들러에 의존) 속도가 매우 느립니다.
esbuild 설치
yarn add -D esbuildNode.js 용 번들링
tsc (TypeScript 컴파일러) 외에도 다음과 같이 Node.js 용 esbuild와 함께 코드를 번들링 할 수도 있습니다.
# Compile and bundle
yarn esbuild src/cli.ts --bundle --platform=node --outfile=dist/esbuild/cli.js
# Same, but minify and sourcemaps
yarn esbuild src/cli.ts --bundle --platform=node --minify --sourcemap=external --outfile=dist/esbuild/cli.js
# Run the bundled output
node dist/esbuild/cli.jsesbuild 설명서에서 esbuild 옵션에 대해 자세히 알아보십시오.
Notes:
브라우저 호환 모듈 빌드
esbuild, webpack, parcel 등의 번 들러를 사용하여 브라우저 호환 모듈을 생성 할 수 있습니다. 이 가이드에서는 esbuild를 사용합니다.
# Bundle for browsers
yarn esbuild src/browser.ts --bundle --outfile=dist/esbuild/browser.js
# Same, but with minification and sourcemaps
yarn esbuild src/browser.ts --bundle --minify --sourcemap=external --outfile=dist/esbuild/browser.jsbrowser.ts의 코드는 브라우저에 로드되면 실행됩니다.
esbuild에는 --global-name = xyz 플래그가있어 진입 점에서 내보내기를 전역 변수에 저장합니다. esbuild“글로벌 이름”문서도 참조하십시오.
DOM 속성 (창, 문서)에 액세스
브라우저에 로드 되면 코드의 창과 문서에 액세스 할 수 있습니다. 이를 사용하여 코드의 일부를 창 개체에 연결할 수 있습니다.
tsconfig.json에서 라이브러리 목록에 DOM을 추가합니다.
"lib": ["ES6", "DOM"]브라우저 빌드의 진입 점으로 src/browser.ts를 만듭니다. 여기에서 다음과 같이 창에 사용자 지정 속성을 연결할 수 있습니다.
// Import a function
import { greet } from './main'
// Make it accessible on the window object
(window as any).greet = greet이제 esbuild와 함께 번들로 제공합니다.
yarn esbuild src/browser.ts --bundle --outfile=dist/esbuild/browser.js다음과 같은 간단한 웹 사이트로 결과를 테스트합니다 : browser-test.html
npm에 게시
Node.js와 브라우저 모두에서 사용할 수 있도록 최신 코드를 npm에 게시 해 보겠습니다.
npm 및 yarn은 .gitignore의 파일을 무시합니다. dist가 거기에 있기 때문에 사용자 지정 .npmignore를 사용하여 npm ignore 설정을 덮어 써야 합니다.
wget https://raw.githubusercontent.com/metachris/micropython-ctl/master/.npmignore빌드를 만들고 yarn 게시를 실행합니다.
# Build with tsc and esbuild
yarn build-all
# Update the version and publish to npmyarn publishbuild-all은 유형 정의 파일을 얻기 위해 tsc로 프로젝트를 빌드하고 Node.js 및 브라우저 용으로 빌드 하기 위해 esbuild를 모두 빌드합니다.
yarn publish를 실행 한 후 프로젝트 / 새 버전이 npm에 게시됩니다. ?
예를 들어 이 상용구 프로젝트의 npm 패키지는 다음과 같습니다.
Node.js에서 사용
npm으로 모듈을 설치할 수 있습니다.
npm install typescript-boilerplate-2021
# or with yarn
yarn add typescript-boilerplate-2021사용자 정의 코드에서 모듈 사용 :
import { greet } from 'typescript-boilerplate-2021'
greet("World")브라우저에서 사용
jsDelivr, cdnjs, unpkg.com 또는 skypack과 같이 npm 프로젝트를 자동으로 제공하는 여러 CDN이 있습니다.
수동 개입 없이 다음과 같이 jsDelivr의 패키지에 액세스 할 수 있습니다.
다음과 같이 HTML에서 번들을 참조 할 수 있습니다.
<script src="https://cdn.jsdelivr.net/npm/typescript-boilerplate-2021@0.3.0"></script>다음과 같은 간단한 웹 사이트로 결과를 테스트합니다 : browser-test.html
지속적인 통합
모든 코드 푸시에서 테스트와 linter를 실행하고 싶을 것입니다. 또한 CI에서 문서를 빌드하고 배포 할 수도 있습니다.
GitHub Actions
GitHub 작업 문서를 참조하세요. .github / workflows / lint-and-test.yml 파일을 만듭니다.
name: Lint and test
on: [push, pull_request]
jobs:
lint_and_test:
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
nodejs: [10, 12, 14]
steps:
- uses: actions/checkout@v2
# https://github.com/actions/setup-node
- uses: actions/setup-node@v2-beta
with:
node-version: ${{ matrix.nodejs }}
- run: yarn install
- run: yarn test
- run: yarn lint
- run: yarn build-all여러 운영 체제에서 테스트
다양한 운영 체제 (Windows, Linux, macOS)에서 빌드 / 패키지를 확인하려는 경우 다음과 같은 작업에 대한 매트릭스를 설정할 수 있습니다.
jobs:
default-version:
runs-on: ${{ matrix.os }}
strategy:
fail-fast: false
matrix:
os: [macos-latest, windows-latest, ubuntu-latest]
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2-beta
with:
node-version: 12
...GitLab CI
GitLab CI 문서를 참조하세요. .gitlab-ci.yml 파일을 만듭니다.
image: node:12
cache:
paths:
- node_modules/
stages:
- test
lint-and-test:
stage: test
script:
- yarn install
- yarn test
- yarn lint
- yarn build-allTypeDoc을 사용한 API 문서
JSDoc 구문을 기반으로 하는 TypeDoc을 사용하여 TypeScript 소스 파일에서 API 문서를 자동 생성 할 수 있습니다. 생성 된 문서는 CI를 통해 GitHub / GitLab 페이지에 게시 할 수 있습니다.
문서화 문자열은 다음과 같습니다.
/**
* This comment _supports_ [Markdown](https://marked.js.org/)
*/
export class DocumentMe {}yarn 문서로 문서를 생성합니다. 결과 HTML은 docs/에 저장됩니다.
CI를 사용하여 문서를 GitHub 또는 GitLab 페이지에 자동으로 게시 할 수 있습니다.
예를 들어 예제 프로젝트에 대한 문서 : https://metachris.github.io/typescript-boilerplate/
요약
이 게시물은 테스트, esbuild, Node.js 및 브라우저 용 번들링, npm에 게시, 지속적 통합 및 자동 문서화와 함께 전체 TypeScript 프로젝트 설정을 다루었습니다.
다음과 같이 상용구 저장소를 사용할 수 있습니다.
git clone https://github.com/metachris/typescript-boilerplate.git
cd typescript-boilerplate
yarn install
yarn test
yarn lint
yarn build-all참고 문헌
https://www.metachris.com/2021/04/starting-a-typescript-project-in-2021/
등록된 댓글이 없습니다.
