Как импортировать HTML-файлы как шаблоны в Rollup и компилировать в объединенные строки - PullRequest
Новая
       45

Как импортировать HTML-файлы как шаблоны в Rollup и компилировать в объединенные строки

0 голосов
/ 20 мая 2019

Я создаю процесс сборки для экспериментов Optimizely с использованием Rollup. В настоящее время мы использовали Webpack, но он экспортирует раздутый код для этого варианта использования. Я хочу иметь возможность импортировать файлы .html в качестве шаблонов и компилировать их в ES5-совместимые объединенные строки в моей сборке Rollup / Babel.

Я уже пробовал некоторые из плагинов шаблонов на https://github.com/rollup/awesome#templating, но не хочу добавлять другую библиотеку модулей в качестве зависимости для каждого эксперимента. Я смог импортировать HTML как шаблонный литерал, используя несколько плагинов, но по какой-то причине они не компилируются в строку, совместимую с ES5, от babel. Кажется, что Babel компилирует только встроенные (не импортированные) литералы шаблона в сцепленные строки. Все остальное правильно компилируется в ES5. Не уверен, почему внешние строки HTML не включены. Может быть, моя проблема в конфигурации Babel?

Метод, который мы использовали в нашей сборке Webpack, использует html-es6-template-loader, который имеет встроенную компиляцию, поэтому он может генерировать ES5-совместимую конкатенацию строк из коробки. Нечто подобное может быть идеальным.

Это моя текущая конфигурация. Здесь используется posthtml, но я попробовал несколько плагинов с одинаковым результатом. 

import babel from 'rollup-plugin-babel';
import posthtml from 'rollup-plugin-posthtml-template';

export default {
    input: './src/index',
    output: {
        file: './dist/index.js',
        format: 'cjs'
    },
    plugins: [
        posthtml({
            template: true
        }),
        babel({
            exclude: 'node_modules/**',
            presets: ['@babel/preset-env']
        })
    ]
}

Идеальный сценарий, начинающийся с файла HTML в качестве шаблона с синтаксисом es6 $ {}, импорта в файл JS и компиляции в файл JS со встроенной объединенной строкой.

template.html 

<div class="some-div">hello ${data.entity}</div>

index.js, написанный в современной версии ES 

import template from './template.html';
console.log(template({entity="world"})); // logs: <div class="some-div">hello world</div>

Я ожидаю, что в результате будет скомпилирован скрипт, совместимый с ES5, без необходимости использования дополнительного кода для шаблонов. результат будет похож на код ниже. 

var template = function(data){
  return '<div class="some-div">hello ' + data.entity + '</div>';
}
console.log(template({entity="world"})); // logs: <div class="some-div">hello world</div>

1 Ответ

0 голосов
/ 24 мая 2019

Я разобрался с решением.Мне просто нужно было добавить HTML в конфигурацию babel.Я не думал, что это было нужно раньше, так как думал, что babel только что проанализировал файл JS после того, как HTML был импортирован и преобразован в литерал шаблона, но я думаю, что это необходимо.

Я понял это, просматривая документы по внешним зависимостям для rollup-plugin-babel 

babel({
    exclude: 'node_modules/**',
    presets: ['@babel/preset-env'],
    extensions: ['.js', '.html']
})
...