在打字稿中导入 JSON 文件

用户2570135

我有我想通过导入语句访问的 JSON 文件。我不想直接在代码中公开名称，而是从 .env 文件中读取名称并将其导入。

这是我直接导入文件的代码片段。如何更改它以便我可以从 .env 读取文件名并导入实际文件

import keys from 'home/path/account.json';
class SecurityServices {
   getToken(){
     return keys.certs;
   }
}

基本上我有带有路径的 env 文件，我在我的打字稿代码中导入了它。

.env { "keyFile":"home/path/account.json'" }

谢谢

康纳低

如果你只是想在构建时替换一些文本，像 rollup 这样的打包器就是你的工具。例如：

// file.ts
import keys from 'home/path/account.json';

// rollup.config.js
import replace from '@rollup/plugin-replace';

export default {
  client: {
    plugins: [
      replace({ 'home/path/account.json': process.env.keyFile })

您应该能够使用 webpack、gulp 和大多数其他现代打包器完成类似的工作。

或者（和我的偏好），考虑进行动态导入。请注意，这需要使用Promises向您的代码添加异步因素：

let _loadedJson: any = null;

export async function getJsonFromFile() {
  if (_loadedJson === null) {
    // This dynamic import will happen one time, when this is first called.
    _loadedJson = await import(process.env.keyFile);
  }
  // Optionally assert a type at return since dynamic imports resolve to `any`.
  return _loadedJson as Record<string, any>
}

使用这种方法，您可以减少初始构建大小，但代价是需要异步处理 JSON。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。