Babel/Typescript别名配置异常：组件无法导入Node模块

Let's break down why this is happening and fix it step by step:

The Root Cause #

TypeScript's paths config only tells the TS compiler how to resolve modules—your bundler (browserify) doesn't automatically respect these rules. Even though traceResolution shows TS found query-string, browserify is trying to resolve the module from the components/example-component/ directory, and your current babel/browserify setup isn't bridging that gap properly.

Step 1: Clean Up Your tsconfig.json #

Your current paths has a redundant "*": ["../node_modules/*"] that can interfere with default module resolution. Let's simplify and align the config properly:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "target": "es2015",
    "sourceMap": true,
    "baseUrl": "./", // Set base to your project root for clearer pathing
    "traceResolution": true,
    "paths": {
      "@components/*": ["components/*"] // Direct alias from root, no relative jumps
    }
  },
  "include": ["ts/**/*", "components/**/*"] // Ensure TS processes components/*.ts files
}

Step 2: Make Browserify Respect tsconfig Paths #

Browserify doesn't understand TS's paths out of the box. Install the tsconfig-paths-browserify plugin to bridge this:

npm install tsconfig-paths-browserify --save-dev

Update your gulpfile.js to use this plugin with browserify/tsify:

const browserify = require('browserify');
const tsify = require('tsify');
const tsconfigPaths = require('tsconfig-paths-browserify');

// ... rest of your gulp setup
function bundle() {
  return browserify({
    basedir: '.',
    debug: true,
    entries: ['ts/app.ts'],
    cache: {},
    packageCache: {}
  })
  .plugin(tsify, { project: './tsconfig.json' })
  .plugin(tsconfigPaths) // Add this to make browserify honor tsconfig paths
  .transform('babelify', {
    presets: ['es2015'],
    extensions: ['.ts']
  })
  .bundle()
  // ... pipe to your output destination
}

Step 3: Fix Babel's Module Resolver #

Your current .babelrc has a root set to ./ts, which can throw off node module resolution from the components directory. Adjust it to use the project root:

{
  "presets": ["es2015"],
  "plugins": [
    ["module-resolver", {
      "cwd": "babelrc",
      "root": ["./"], // Use project root as the resolver base
      "alias": {
        "@components": "./components"
      }
    }]
  ]
}

Step 4: Verify Dependencies #

Double-check that query-string is installed as a production dependency (not just dev):

npm install query-string --save

Test It Out #

Run your gulp build task again. The browserify bundler should now correctly resolve query-string from any file in your project, including component.ts, while keeping your @components alias working as expected.

内容的提问来源于stack exchange，提问作者Zammy