개발 환경 설정은 모든 소프트웨어 개발 프로젝트에서 중요한 단계입니다. typescript와 mocha를 단위 테스트 프레임워크로 사용하여 웹 개발 프로젝트를 설정하는 방법을 찾고 있다면 이 게시물이 적합합니다.

이 게시물에서는 다음을 보여 드리겠습니다.

typescript로 웹 개발 환경을 설정하는 방법 .

webpack 및 babel을 사용하여 프로젝트를 빌드하는 방법입니다.

mocha으로 단위 테스트를 설정하는 방법.

시작하다

새 npm 프로젝트 만들기

먼저 새로운 npm 프로젝트를 생성해야 합니다. 프로젝트 폴더를 생성하고 npm 프로젝트를 초기화합니다.
$ npm init -y

필수 라이브러리 설치

1. 웹팩 설치
$ npm i -D webpack webpack-cli
2. 바벨 설치
$ npm i -D @babel/core @babel/preset-env babel-loader
3. 타이프스크립트 설치
$ npm i -D typescript ts-node @babel/preset-typescript
4. 모카 설치
$ npm i -D mocha @types/mocha

구성 파일 만들기

1. webpack.config.js 생성

프로젝트 폴더에 webpack.config.js를 생성하고 아래 내용을 붙여넣습니다.

const path = require("path");

module.exports = [
  {
    entry: "./src/main.ts",
    output: {
      path: path.join(__dirname, "build"),
      filename: "main.js",
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.js'],
    },
    target: "web",
    node: {
      __dirname: false,
    },
  }
];

2. .babelrc 생성

프로젝트 폴더에 .babelrc를 생성하고 아래 내용을 붙여넣습니다.

{
    "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

3. tsconfig.testing.json 생성

프로젝트 폴더에 tsconfig.testing.json 생성 후 아래 내용 붙여넣기

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "lib": ["es2017"],
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "inlineSourceMap": true,
    "moduleResolution": "node",
  }
}

4. .mocharc.json 생성

프로젝트 폴더에 tsconfig.testing.json 생성 후 아래 내용 붙여넣기

{
  "diff": true,
  "extension": ["js", "ts"],
  "package": "./package.json",
  "reporter": "spec",
  "require": "ts-node/register",
  "recursive": true,
  "slow": 75,
  "timeout": 60000,
  "ui": "bdd",
  "watch-files": ["src/**/*.js", "src/**/*.ts", "test/**/*.js", "test/**/*.ts"]
}

5. package.json에 npm 스크립트를 추가하여 Webpack 실행

Webpack을 실행하려면 간단한 명령으로 npm 스크립트를 사용해야 합니다webpack.

"scripts": {
  "build": "webpack",
  "test": "env TS_NODE_PROJECT=\"tsconfig.testing.json\" mocha"
}

그러면 개발을 시작할 준비가 된 것입니다.