Блог

Вот выдержка из документов 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, вы можете использовать Node.js fs.readFileSync API для выполнения
это. 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 может импортировать все файлы компонентов. Как я могу заставить это работать?