2021년에 타자 스크립트 프로젝트 만들기

이 글은 typescript로 프로젝트를 처음부터 만드는 방법을 설명합니다.마지막 항목은 기본 코드, 테스트, 실행 코드 포맷의 제출 연결, 전송의 자동 테스트 등을 포함합니다!나는 네가 좋아하길 바란다.

TL;박사 01 명
코드 찾기here

토대

네가 시작하기 전에

node/npm(최신lts는 할 수 있을 것 같아)

npm init가 실행되었습니다.그래서 너 하나 있어package.json

타자 스크립트 설정

타자 원고 자체
매우 단도직입적: npm install typescript --save-dev지금 이게 효과가 있는지 확인하기;파일 생성src/demo.ts 및

export function greeter(person: string): string {
 return "Hello, " + person + "!";
}

console.log(greeter("World"));

그리고 뛰고...기다리다뭘 뛰어야 돼요?그럼 JS, a node src/demo.ts면 돼!
...
아아...왜 그것은 예상치 못한 ":"을 불평합니까?
:-/

typescript 자체 구성
나는 tsc(typescript 컴파일러)에 추천하는 기본 설정을 사용하는 것을 좋아한다. npm install --save-dev @tsconfig/recommended 그리고 tsconfig.json라는 파일을 만들고 다음과 같은 내용으로 채운다.

{
 "extends": "@tsconfig/recommended/tsconfig.json",
 "compilerOptions": {
 "outDir": "./dist",
 },
 "include": ["src/**/*"],
 "exclude": ["node_modules", "dist"]
}

너의 소포 안에 있다.json 구축을 위한 스크립트 추가: "build": "tsc",너는 뛸 수 있을 거야npm run build 그리고node dist/demo.js좋아요!

속력을 내다
응, 나는 코드가 바뀔 때마다 반드시 두 개의 명령을 입력해야 하는 것을 좋아하지 않는 그런 사람이야.그래서 저희가 시간을 내서 자동화를 해보도록 하겠습니다.
프로젝트에 tsc watch를 먼저 추가합니다: npm install tsc-watch --save-dev그런 다음 패키지에 모니터링 스크립트를 추가합니다."watch": "tsc-watch --onSuccess \"node ./dist/demo.js\"",현재 당신은 npm watch를 실행할 수 있습니다. 당신이 한 모든 변경 사항은 즉시 준수되고 실행될 것입니다!

"2 공간 또는 GTFO"법을 실행합니다!
포맷은 eslint와prettier를 사용하여 완성되며, 강제 포맷은husky와 미리 제출한 연결을 사용하여 완성됩니다

스타일 도구 구성

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-import prettier

.eslintrc.js 파일에서 다음을 수행합니다.

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  root: true,
  env: {
    node: true,
  }
};

.eslintignore:

node_modules
dist

.prettierrc.js:

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  singleQuote: true,
};

패키지에 lint 스크립트를 추가합니다.json:"lint": "eslint src --ext .js,.jsx,.ts,.tsx"
자동화
다시 한 번 말하지만, 나는 매우 게으르기 때문에, 나는 이 공구들이 자동으로 운행될 필요가 있다.여기가 하스키가 통신하는 곳이야!

npm install --save-dev husky pretty-quick

준비 스크립트 추가: "prepare": "husky install"실행: npm run prepare너는 마땅히 영화를 보러 가야 한다.지금은 헤스키 목록입니다.
이 디렉토리에 파일 nammedpre-commit를 생성하고 다음 항목으로 채웁니다.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install pretty-quick --staged
npm run lint

이제 커밋 시 형식이 수정됩니다.\o/

'의미 있는 약속 또는 GTFO'법률 집행!
이것은 제출lint을 통해 완성됩니다npm install --save-dev @commitlint/config-conventional @commitlint/cli그런 다음 에 commit-msg 파일을 생성합니다.husky 디렉토리는 다음과 같습니다.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

또 하나commitlint.config.js, 안에module.exports = {extends: ['@commitlint/config-conventional']}가 있다.
지금 당신의 약속 정보는 강제로 법률을 준수하는 것입니다!

너의 친구가 법을 어기는 것을 방지하다
하스키가 처리해줄게:)

이거는 네가 원하는 테스트가 아니야.

설립하다
나는jest를 사용하기 때문에 우리는 먼저 그것을 설치해야 한다: npm install -D jest ts-jest @types/jest다음 구성jest.config.js:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

테스트 스크립트 추가: "test": "jest"
너의 첫 번째 테스트demo.spec.ts에서 우리는 우리의 영빈원이 매우 예의 바르다는 것을 확보할 것이다.

import {greeter} from './demo'

describe('greeter function', () => {
    test('a greet should start with Hello', () => {
      expect(greeter("Bob").startsWith('Hello')).toBe(true)
    });
});

해봐npm run test
어떻게 된 일인지 알아맞혀 봐...?자동화
이번에는 외부 DEP도, 수동 조정도 없었다!jest가 우리를 도와 이 문제를 해결했다.달리기만 하면 jest --watch!테스트는 원본 코드 편집에서 실행되어야 합니다.또는, 이 점을 실현하기 위해 id에서 확장을 사용할 수 있습니다.

개발 환경 설정
나는 vscode를 사용하기 때문에 이 절에서 토론할 내용이다.

확장성

Jest (orta.vscode-jest)

ESLint (dbaeumer.vscode-eslint)

Prettier - Code formatter (esbenp.prettier-vscode)

jest에 코드 덮어쓰기 덮어쓰기 (io.orta.jest.coverage.toggle) 를 사용하는 것을 권장합니다.
편집기에서prettier를 포맷 프로그램으로 직접 사용하면 제출할 때가 아니라 코드를 바로 포맷할 수 있습니다.

석방 시간 다 됐어요?
자, 당신의 환영자는 지금 첫 번째 버전을 발표할 준비가 되어 있습니다!엄격한 제출 메시지 정책을 이용하여 좋은 변경 로그를 만듭시다.표준 버전은 우리가 이 점을 할 수 있도록 도와줄 것이다npm i --save-dev standard-version및 제작 스크립트: "release": "standard-version"마지막으로 뛰기npm run release -- --first-release 네 거 해...최초 발표!

자동화, 누버!
github 조작을 사용합니다. 왜냐하면 이 조작들은 매우 간결하기 때문입니다.이 동작을 설정하기 위해 .github/workflows/ 디렉터리를 만듭니다.

제출 시 자동 테스트
이 작업 흐름은 노드 의존항을 깨끗하게 설치하고 원본 코드를 생성하며 서로 다른 버전의 노드에서 테스트를 실행합니다
For more information node.js.yml :

name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x]
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

게시 시 자동 게시npmPublish.yml :

name: Publish package on npm

on:
  release:
    types: [created]

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/
      - name: Cache node modules
        uses: actions/cache@v1
        with:
          path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-
      - run: npm ci
      - run: |
          if [ ${{ github.event.release.action }} = "prereleased" ]; then
            npm publish --tag beta
          else
            npm publish
          fi
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

NPM_TOKEN는 메모리 라이브러리의 비밀로 npm가 수여한 발표 권한이 있는 방문 영패를 가지고 있다.개인 정보를 보려면 https://www.npmjs.com/settings/{YOUR_USER}/tokens로 전화하십시오.

재미있는 물건
하하, 너 휘파람 불어.