如何在模板组件中导入 json 文件

Question

我想在 StencilJS 中导入包含数据的 json 文件，如下所示：

const data = await import('./data.json')

// OR
import data from './data.json'

// OR
import * as data from './data.json'

// OR
const data = require('./data.json')

但这些都不起作用。

我想要实现的是拥有一个代码拆分、动态加载的 json 模块，或者静态构建的 json 模块（不是代码拆分，而是捆绑在某些路径中）。

Answer 1

2021 年 2 月更新

也可以在没有插件的情况下执行此操作，只需在 tsconfig.json 中启用 resolveJsonModule（具有推断类型的额外好处）。

// tsconfig.json

{
  "compilerOptions": {
    "resolveJsonModule": true,
    // ...
  }
}

import { version } from '../package.json';

（在这种情况下指定 .json 扩展名很重要。）

原答案

您可以使用 @rollup/plugin-json 将 .json 文件转换为 ES6 模块。

npm i -D @rollup/plugin-json

// stencil.config.ts

import json from '@rollup/plugin-json'

export const config: Config = {
  plugins: [json()],
  // ...
};

那么您的前三个 import 语句应该都可以工作，甚至可以命名为 imports
（比如 import { version } from './package'）。

如何在模板组件中导入 json 文件

How to import json file in stencil component

stenciljs

2021 年 2 月更新

原答案