如何确定TypeScript应用构建时所用aurelia-google-maps的分发版本？

Great question! Let's break this down first for your specific Aurelia + TypeScript setup with aurelia-google-maps, then cover the general approach for any npm package with multiple distribution builds.

1. Check the Package's package.json #

Head to node_modules/aurelia-google-maps/package.json and look for these core fields—they dictate which build your tooling will pick:

• exports: This is the modern, authoritative way packages define entry points. It often explicitly separates behavior for import vs require syntax, or even browser vs Node.js environments. For example:

  "exports": {
    ".": {
      "import": "./dist/native-modules/index.js",
      "require": "./dist/commonjs/index.js"
    }
  }
  

  Since you're using import {Configure} from "aurelia-google-maps", this would directly map to the native-modules build.
• module: Points to the ES module (Native Modules/ES2015) entry. If no exports exists, build tools like Webpack or Aurelia CLI will prioritize this first because ES modules support tree-shaking.
• main: The traditional entry point for CommonJS/AMD builds—tools fall back to this if no exports or module is defined.

2. Verify Your Build Tool Configuration #

• Aurelia CLI: When you initialized your project, you selected a module format (ES6/ESNext or CommonJS). If you picked ESNext, it defaults to native-modules or es2015; for CommonJS, it uses the commonjs dist folder. Double-check your aurelia.json under build.loader.moduleKind to confirm.
• Webpack: Webpack's default resolve.mainFields prioritizes module over main, so it will pick the ES module build unless you've modified this config. Look in your webpack.config.js for:

  resolve: {
    mainFields: ['module', 'main'] // Default behavior for browser targets
  }
  

3. Test Directly (Most Reliable) #

Nothing beats seeing it in action:

• Pick one dist folder (e.g., dist/native-modules), open its entry file (index.js), and add a temporary console log:

  console.log('Using aurelia-google-maps native-modules version');
  

• Run your app and check the browser console. If the log appears, that's the active version. If not, repeat with other dist folders until you find the one that logs.
• For Webpack users, run webpack --stats detailed and search the output for aurelia-google-maps—you'll see the exact file path being loaded into your bundle.

For any package with multiple dist folders, follow this workflow:

• Start with package.json: Check exports, module, main, and browser fields. exports takes precedence over all others. The browser field specifies builds optimized for browser environments (often AMD/SystemJS).
• Understand Your Build Tool's Priorities:
  • Vite/Rollup: Prioritize exports.import, then module, then main.
  • Webpack: Follows resolve.mainFields (default: ['browser', 'module', 'main'] for browser targets).
  • Node.js (server-side): Uses exports.require or main if no exports exists.
• Inspect the Build Output: Look at your bundled code. ES2015 builds use modern syntax like arrow functions and const/let; CommonJS builds use module.exports and require(); AMD builds include define() calls.

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