时间戳

首页 > 解决方案 > 如何在模板组件中导入 json 文件

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

问题描述

我想在 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 模块（不是代码拆分，而是捆绑在某些路径中）。

标签： stenciljs

解决方案

2021 年 2 月更新

也可以在没有插件的情况下做到这一点，只需启用resolveJsonModulein tsconfig.json（加上推断类型的额外好处）。

// 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 { version } from './package'）。

推荐阅读