Azure Pipeline webpack typescript 别名无法使用 Craco

Question

我有一个使用 Craco、Webpack 和 Typescript 的 ReactJs 应用程序。它可以运行并在本地成功构建，但是当我在 Azure DevOps 上构建它时，它无法创建别名。

pipeline.yml

- task: NodeTool@0
    inputs:
      versionSpec: '12.x'
    displayName: 'Install Node.js'

  # Install dev dependencies
  - script: npm install
    displayName: 'Install Packages'

  # build release
  - script: npm run build
    failOnStderr: true
    displayName: 'Creating optimized build'

craco.config.json

module.exports = {
  plugins: [
    {
      plugin: require('craco-alias'),
      options: {
        source: 'tsconfig',
        baseUrl: './src',
        tsConfigPath: './tsconfig.paths.json',
        debug: false,
      },
    },
  ],
  webpack: {},
};

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "Api": ["./api"],
      "Components": ["./components"],
    }
  }
}

azure 管道错误

TypeScript error in /home/vsts/work/1/s/src/App.tsx(6,20):
Cannot find module 'Components/Header/Header' or its corresponding type declarations.  TS2307

    4 | import { LastLocationProvider } from 'react-router-last-location';
    5 | 
  > 6 | import Header from 'Components/Header/Header';
      |                    ^
    7 | import Routes from './Routes';
    8 | 
    9 | import * as CommonActions from 'State/actions';


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app.example@0.1.0 build: `craco build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the app.example@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vsts/.npm/_logs/xxx-debug.log

##[error]Bash exited with code '1'.
##[error]Bash wrote one or more lines to the standard error stream.
##[error]The following changes are being made to your tsconfig.json file:

##[error]  - compilerOptions.paths must not be set (aliased imports are not supported)


##[error]npm
##[error] ERR! code ELIFECYCLE
npm 
##[error]ERR! errno
##[error] 1

##[error]npm
##[error] ERR! app.example@0.1.0 build: `craco build`
npm 
##[error]ERR! Exit status 1

##[error]npm
##[error]Additional writes to stderr truncated

Answer 1

我必须将我的配置更改为：

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "Api/*": ["src/api/*"],
      "Components/*": ["src/components/*"],
    }
  }
}

Azure Pipeline webpack typescript 别名无法使用 Craco

Azure Pipeline webpack typescript alias doesn't work using Craco

typescript

webpack

azure-pipelines

craco

pipeline.yml

craco.config.json

tsconfig.paths.json

azure 管道错误

tsconfig.paths.json