Как импортировать ресурсы не-TypeScript из файла TypeScript с помощью Parcel

Question

Вот выдержка из документов Parcel:

Вы также можете импортировать ресурсы, отличные от JavaScript, из файла JavaScript, например, CSS, HTML или даже файл изображения. Когда вы импортируете один из этих файлов, это не встроено как в некоторых других упаковщиках. Вместо этого он помещается в отдельный пакет (например, файл CSS) вместе со всеми его зависимостей. При использовании CSS-модулей экспортируемые классы размещаются в комплекте JavaScript. Другие типы активов экспортируют URL в вывод файл в комплекте JavaScript, чтобы вы могли ссылаться на них в своем коде.

// Import a CSS file
import './test.css'

// Import a CSS file with CSS modules
import classNames from './test.css'

// Import the URL to an image file
import imageURL from './test.png'

// Import an HTML file
import('./some.html')
// or:
import html from './some.html'
// or:
require('./some.html')

Если вы хотите встроить файл в комплект JavaScript вместо ссылаться на него по URL, вы можете использовать API-интерфейс Node.js fs.readFileSync, чтобы сделать тот. URL должен быть статически анализируемым, то есть он не может иметь любые переменные в нем (кроме __dirname и __filename).

import fs from 'fs'

// Read contents as a string
const string = fs.readFileSync(__dirname + '/test.txt', 'utf8')

// Read contents as a Buffer
const buffer = fs.readFileSync(__dirname + '/test.png')

// Convert Buffer contents to an image
;<img src={`data:image/png;base64,${buffer.toString('base64')}`} />

Я пытался сделать некоторые из них, но из файла TypeScript, и, похоже, он не работает.

Вот пример того, чего я пытаюсь достичь:

component.html

<h1>Some really big text</h1>
<p>Some much smaller text</p>

component.css

h1 {
  font-size: 80px;
  text-align: center;
}

p {
  font-size: 10px;
}

component.ts

import { styles } from './component.css;
import { html } from './component.html;

class Component extends HTMLElement {
  constructor() {
  super();

  // Append the styles and html to shadowRoot on element
}

customElements.define('app-root', Component);

Идея состоит в том, чтобы определять пользовательские элементы, используя их собственные отдельные файлы html, css и ts. Затем корневой файл index.html может указывать на файл main.ts, а main.ts может импортировать все файлы компонентов. Как я могу сделать эту работу?