Как я могу использовать автономный Babel для преобразования импорта HTML в переменную? - PullRequest
Новая
       3

Как я могу использовать автономный Babel для преобразования импорта HTML в переменную?

0 голосов
/ 08 ноября 2019

Я хотел бы использовать плагин Babel babel-plugin-transform-html-import-to-string для динамического преобразования моего кода в клиенте браузера. Но babel-plugin-transform-html-import-to-string создан для запуска из узла с файловыми библиотеками. Но в Интернете в браузере я не могу использовать эти файловые библиотеки.

Как я могу сделать так, чтобы Babel Standalone преобразовал этот код?

Мое объявление: 

import template from './template.html';

Преобразовать в: 

var template = '<div>my template<div>';

1 Ответ

0 голосов
/ 08 ноября 2019

Я нашел простой способ включить используемый код плагина, встроенный в библиотеку преобразования babel-plugin-transform-html-import-to-string.

Шаг 1

Импорт Babel в документ.

Шаг 2

Затем я взялкод и удалил файл библиотеки и добавил строковое значение для кода, html. Этот код из этой библиотеки . 

 function endsWith(str, search) {
    return str.indexOf(search, str.length - search.length) !== -1;
  }

  // transform `import template from 'file.html';` to a variable `var template = '<div></div>'`;
  function babelPluginImportHtmlToString(o) {
    var t = o.types;
    return {
      visitor: {
        ImportDeclaration: {
          exit: function (path, state) {
            const node = path.node;

            if (endsWith(node.source.value, '.html')) {
              const html = require(node.source.value);

              path.replaceWith(t.variableDeclaration("var", [
                t.variableDeclarator(
                  t.identifier(node.specifiers[0].local.name),
                  t.stringLiteral(html))]));
            }
          }
        }
      }
    };
  }

Шаг 3

Затем я зарегистрировал функцию как плагин Babel. И затем вызвал процесс преобразования, который использует плагин. 

  var plugins = [];
  plugins.push('babelPluginImportHtmlToString');

  babel.registerPlugin('babelPluginImportHtmlToString', babelPluginImportHtmlToString);

  // TODO I'm not showing the babel import statement, include a reference to babel...
  var code = babel.transform(code, {
    filename: filename,
    plugins: plugins,
    presets: presets
  }).code;

Пример

Я добавил поддержку для него в скрипке Сенча здесь. Посмотрите пример здесь: https://fiddle.sencha.com/#view/editor&fiddle/30vv. Если вы проверяете devtools, он будет в require.js.

...