안녕하세요. 엔지엠소프트웨어입니다. 기존에 Java Spring boot로 Backend를 구성하고, Frontend는 React+Nodejs+typescript로 개발하고 있었는데요. npm start로 간단하게 테스트하다가 이번에 nx를 사용하기로 했습니다. frontend에서 nx build를 사용하려면 nx package를 설치해야 합니다.

> cd frontend
> npm install
> npm i -g nx
> nx searve

 

nx.json에 아래와 같은 설정들을 추가 해줍니다.

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "npmScope": "ngmsoftware",
  "affected": {
    "defaultBase": "master"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "YjA0MmRmOGItMGRmZC00OGFmLTljYWUtMDBlZDg0N8RmNGI5fHJlYWQtd3JpdGU="
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    },
    "e2e": {
      "inputs": ["default", "^production"]
    },
    "lint": {
      "inputs": [
        "default",
        "{workspaceRoot}/.eslintrc.json",
        "{workspaceRoot}/.eslintignore"
      ]
    },
    "test": {
      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/.eslintrc.json",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/jest.config.[jt]s"
    ],
    "sharedGlobals": ["{workspaceRoot}/babel.config.json"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "bundler": "webpack",
        "babel": true
      },
      "component": {
        "style": "css"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      }
    }
  }
}

 

jest는 junit, nunit과 같은 자바스크립트 테스트 프레임워크입니다. jest.config.ts 기본 설정입니다.

import { getJestProjects } from '@nrwl/jest';

export default {
  projects: getJestProjects(),
};

 

jest.preset.ts 기본 설정입니다.

const nxPreset = require('@nrwl/jest/preset').default;

module.exports = { ...nxPreset };

 

마지막으로 package.json에 npm start 또는 npm build시 실행될 스크립트를 추가 해줍니다.

{
  "name": "macro",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve ngmsoftware",
    "build": "nx build ngmsoftware",
    "test": "nx test"
  },
...
...

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0