tsconfig.json 路径在构建中未解析

Question

My imports works fine when coding, but when I build the project with tsc , the imported files won't be resolved to a valid path.

This is my tsconfig.json :

{
  "compilerOptions": {
    "target": "ES2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    "lib": ["es6"] /* Specify library files to be included in the compilation. */,
    "allowJs": true /* Allow javascript files to be compiled. */,
    "outDir": "build" /* Redirect output structure to the directory. */,
    "rootDir": "src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    "moduleResolution": "node",
    "resolveJsonModule": true /* Include modules imported with '.json' extension */,
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "paths": {
      "@root/*": ["../*"],
      "@src/*": ["./*"]
    }
  }
}

My scripts in package.json :

  "scripts": {
    "dev": "nodemon",
    "build": "rm -rf ../build && tsc",
    "start": "yarn run build && node build/index.js",
    "lint": "eslint . --ext .ts"
  },

The nodemon json works just fine, thanks to tsconfig-paths :

{
  "watch": ["src"],
  "ext": ".ts,.js",
  "ignore": [],
  "exec": "ts-node -r tsconfig-paths/register ./src/index.ts"
}

When I try to run yarn start it throws an error in my api/build/index.js

Error: Cannot find module '../src/app'

The code is requiring a file that does not exist, ../src/app . It should be ./app .

The structure of the build folder is as follows:

build
  routes
    index.js
    users.js
  startup
    routes.js
  app.js
  index.js

I have been banging my head for a while now, and I'm not sure what I'm doing wrong.

How can I make this work?

Answer 1

To solve this issue I replaced tsc with Babel + babel-plugin-module-resolver for building my project and now it works as expected. I will post the whole.json files in case someone has the same issue (check the build script in package.json ). This code is supposed to be used on a Node.js 14.xx application, hence you'll need to change the targets in the .babelrc file according to your needs if you are developing for a different target.

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,
    "target": "ES2018" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
    "lib": ["ESNEXT"] /* Specify library files to be included in the compilation. */,
    "allowJs": true /* Allow javascript files to be compiled. */,
    "outDir": "build" /* Redirect output structure to the directory. */,
    "rootDir": "../" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    "moduleResolution": "node",
    "resolveJsonModule": true /* Include modules imported with '.json' extension */,
    "skipLibCheck": true /* Skip type checking of declaration files. */,
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "paths": {
      "@root/*": ["../*"],
      "@src/*": ["./*"]
    }
  }
}

package.json

{
  "name": "api",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "nodemon",
    "typecheck": "tsc --noEmit",
    "debug": "yarn build && node --inspect --inspect-brk build/",
    "test": "jest --watchAll",
    "build": "rm -rf build/ && babel src --source-maps --extensions '.js,.ts,.tsx' --ignore '**/*.test.ts' -d build",
    "start": "export NODE_ENV=production && yarn run build && node build/index.js",
    "lint": "eslint . --ext .ts",
    "checks": "yarn lint & yarn typecheck"
  },
  "jest": {
    "testEnvironment": "node",
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ]
  },
  "dependencies": {
    "config": "^3.3.3",
    "cors": "^2.8.5",
    "express": "~4.16.1",
    "morgan": "~1.9.1",
    "node-webcam": "^0.7.0",
    "winston": "^3.3.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-typescript": "^7.12.7",
    "@types/config": "^0.0.37",
    "@types/cors": "^2.8.9",
    "@types/debug": "^4.1.5",
    "@types/express": "^4.17.9",
    "@types/morgan": "^1.9.2",
    "@types/node": "^14.14.14",
    "@types/supertest": "^2.0.10",
    "@typescript-eslint/eslint-plugin": "^4.10.0",
    "@typescript-eslint/parser": "^4.10.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.16.0",
    "jest": "^26.6.3",
    "nodemon": "^2.0.6",
    "supertest": "^6.0.1",
    "ts-node": "^9.1.1",
    "tsconfig-paths": "^3.9.0",
    "typescript": "^4.1.3"
  }
}

.babelrc

{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "targets": { "node": 14 }
      }
    ]
  ],
  "plugins": [
    [
      "module-resolver",
      {
        "root": "./src",
        "alias": {
          "@root": ["./"],
          "@src": ["./src"]
        },
        "extensions": [".js", ".ts"]
      }
    ]
  ],
  "sourceMaps": true
}