Webpack: Как разобрать html-шаблоны, находящиеся в js-файле?

Question

Я занимаюсь разработкой простого встраиваемого виджета без файлов .html, только .js и .css. Вся необходимая разметка HTML производится в файлах .js. То есть

function closeWidget() {
  // closeWidget
}

function widgetRenderer() {
  return `
    <div class='widget-header'>
      <span class='widget-close' onclick='closeWidget();'><b>_</b>
    </div>
  `
}

Проблема, с которой я сталкиваюсь: после прикрепления фрагмента кода к веб-сайту действие onclick не будет работать из-за того, что веб-пакет минимизирует имя функции closeWidget. Как я могу сказать webpack запустить эти «встроенные фрагменты html» и изменить их? Это вообще возможно?

Answer 1

Вы не можете сделать это таким образом, onclick - это событие dom, оно не «запускается» веб-пакетом, а dom - само собой. Таким образом, html отображается в браузере, и когда вы щелкаете по span, событие запускается, и браузер ищет открытую js-функцию под названием closeWidget, которая не существует, потому что она находится в области действия компонента и обычно недоступна.

Что вы не используете нормально реагировать с JSX? Это было бы так просто, как:

function closeWidget() {
  // closeWidget
}

render() {
  return (
    <div className='widget-header'>
       <span className='widget-close' onClick={this.closeWidget}><b>_</b>
    </div>
  )
}