Блог

Я хочу импортировать файл json с данными в StencilJS, например:

 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 (не разделенный кодом, но связанный по определенным путям).

Обновление 2/2021

Это также можно сделать без плагина, просто включив resolveJsonModule in 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' ).