为什么反应应用jsconfig.json无法在具有creat-react-app的gitlab ci / cd管道中工作？

Question

我为我的creat-react-app项目添加了一个管道，其中为我的别名定义了一个jsconfig.json。看起来像。

{
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015",
            "es2016",
            "es6",
            "es2017"
        ],
        "target": "es2017",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "src",
        "paths": {
            "actions": ["actions/*"],
            "assets": ["assets/*"],
            "components": ["components/*"],
            "containers": ["containers/*"],
            "constants": ["constants/*"],
            "config": ["config/*"],
            "helpers": ["helpers/*"],
            "stores": ["stores/*"],
            "styles": ["styles/*"]
        }
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

这与我的vscode或webstorm一起使用效果很好。但不适用于我的管道，.gitlab-ci.yml

image: node:latest

stages:
  - dependencies
  - build
  - deploy

dependencies:
  stage: dependencies
  cache: 
    key: $CI_COMMIT_REF_SLUG-$CI_PROJECT_DIR
    paths:
      - node_modules/
  script:
    - yarn config set ignore-engines true
    - yarn global add firebase-tools
    - yarn
  only:
    refs:
      - next-release
    changes:
      - package.json
  artifacts:
    paths:
      - node_modules

build:
  stage: build
  cache: 
    key: $CI_COMMIT_REF_SLUG-$CI_PROJECT_DIR
    paths:
      - node_modules/
    policy: pull
  only:
    - next-release
  script:
    - yarn config set ignore-engines true
    - yarn build
    - yarn global add firebase-tools
    - firebase deploy --only functions,hosting -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token 1/x_xxxxxxxxxxxxxxtokenxxxxxxxxxxxxxxxxxxx -P xxxxxxxxxx-appp
  artifacts:
    paths:
      - build

引发错误提示Module not found: Can't resolve 'components/Textarea' in '/builds/mac/app/src/containers/ComponentName'

任何想法如何解决此问题？还是有人使用任何ci-cd管道创建了一个别名为create-react-app的管道？

感谢您的帮助

Answer 1

根据关于absolute imports的创建React App文档，您应该可以像这样：tsconfig.json中对其进行配置：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

您是否尝试添加"include": ["src"]？

只要您的每个绝对文件夹都在src下，就无需显式指定路径。

所以您的tsconfig.json成为：

{
    "compilerOptions": {
        "lib": [
            "dom",
            "es2015",
            "es2016",
            "es6",
            "es2017"
        ],
        "target": "es2017",
        "module": "es6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "src",

    },
    "include": ["src"]
    "exclude": ["node_modules", "**/node_modules/*"]
}