StencilJS项目中如何通过相对引用在.tsx导入字符串常量？

1. 文件夹结构创建 #

你的app-people.tsx路径是star-wars/src/components/app-people/app-people.tsx，../../helpers/api的路径指向逻辑是从当前文件向上退两级：

• 第一级退到src/components/目录
• 第二级退到src/目录
  所以需要在star-wars/src/目录下创建helpers文件夹，最终目录结构如下：

star-wars/
└── src/
    ├── components/
    │   └── app-people/
    │       └── app-people.tsx
    └── helpers/
        └── api.ts  # 也可以是api文件夹下的index.ts

2. 文件内容与类型选择 #

推荐使用.ts类型文件（适配你的TypeScript项目环境，和.tsx文件兼容），文件内容如下：

// star-wars/src/helpers/api.ts
export const API_URL = "https://swapi.dev/api";

如果想采用文件夹形式（保持导入路径不变），可以创建star-wars/src/helpers/api/index.ts，内容和上面一致，此时导入../../helpers/api会自动读取该index.ts文件的内容。

额外注意点 #

• 确保文件名拼写、大小写和导入路径完全一致（Linux/Mac系统区分大小写，尽量统一规范）
• 用.js文件也能运行，但TypeScript项目更推荐.ts，避免类型检查报错
• 不需要.d.ts文件，.d.ts是为第三方JS模块补充类型声明用的，自己编写的模块直接用.ts即可

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