绝对导入在dev上失败，但在构建打字稿节点babel webpack上有效

Question

我正在使用打字稿项目的节点上相对路径导入工作正常，但我想删除深层../../../../../utils/myfile地狱并使其绝对：

文件夹结构：api/src/utils/

我要更改：

../../util/myfile

并将其转换为

util/myfile

这在我跑步时有效

yarn build当我运行yarn dev

时失败

这是nodemon.json

{
  "exec": "node --inspect -r ts-node/register ./src/app.js",
  "ignore": [
    "node_modules",
    "./test",
    "**/*.d.ts",
    "*.test.ts",
    "*.spec.ts"
  ],
  "watch": ["./src"],
  "ext": "ts, js, tsx",
  "ignore": ["./src/client"]
}

webpack

const path = require('path');

module.exports = function(env, argv) {

  // default to the server configuration
  const base = {
    entry: './src/app.js',
    output: {
      filename: 'js/server.js',
      // path needs to be an ABSOLUTE file path
      path: path.resolve(process.cwd(), 'dist'),
      publicPath: '/',
    },
    // Enable sourcemaps for debugging webpack's output.
    devtool: 'cheap-module-eval-source-map',
    resolve: {
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".ts", ".tsx", ".js", ".json"],
    },
    module: {
      rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: 'ts-loader',
            }
          ]
        },
      ]
    },
  }

  // server-specific configuration
  if (env.platform === 'server') {
    base.target = 'node';
  }

  // client-specific configurations
  if (env.platform === 'web') {
    base.entry = './src/client/trustless-key-recovery/entry.tsx';
    base.output.filename = 'js/client.js';
  }

  return base;
}

babel

module.exports = api => {
  api.cache(true);

  return {
    presets: [
      'next/babel',
    ],
    plugins: [
      ['module-resolver', {
        root: ["./"],
        alias: {
          'react-native$': 'react-native-web',
          "utils": "./src/utils",
        }
      }],
      [
        'babel-plugin-styled-components',
        {
          ssr: true,
        },
      ],
    ],
  }

};

和tsconfig

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "jsx": "react",
    "esModuleInterop": true,
    "typeRoots": ["./src/typings", "../../node_modules/@types"],
    "resolveJsonModule": true,
    "baseUrl": "./src",
    "paths": {
      "utils/*": ["./src/utils*"]
    }
  },
  "include": [
    "./src"
  ],
  "exclude": [
    "../../node_modules", "node_modules"
  ],
}

package.json脚本

"scripts": {
    "server-ssr-client": "next -p 3005 ./src/client/trustless-key-recovery/",
    "server": "nodemon",
    "dev": "cross-env NODE_ENV=development concurrently yarn:server*",
    "predev-api-only": "yarn build-ssr",
    "dev-api-only": "yarn server",
    "tsc": "tsc",
    "test": "mocha -r ts-node/register --recursive --exit",
    "lint": "eslint .",
    "build": "tsc && yarn build-ssr",
    "build-ssr": "next build ./src/client/trustless-key-recovery/"
  }

[失败yarn dev失败]

'错误：在以下位置找不到模块\'utils / session \'\ nFunction.Module._resolveFilename（内部/模块/cjs/loader.js:581:15）\ n

Answer 1

问题是节点不知道如何解析别名路径，因为它无法访问任何别名配置。您可以使用tsconfig-paths库来解决此问题：https://www.npmjs.com/package/tsconfig-paths

我相信您应该能够将-r tsconfig-paths/register添加到nodemon配置中以解决此问题：

"exec": "node --inspect -r ts-node/register -r tsconfig-paths/register ./src/app.js"