如何在模板组件中导入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模块（不是代码分割的，而是捆绑在某些路径上）。

解决方法

您可以使用@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'）。

stenciljs