GlimmerJS: как использовать Glimmer в качестве библиотеки (например, AMD) без сборки с помощью ember-cli/broccoli

GlimmerJS предоставляет несколько пакетов npm (на самом деле 20 пакетов установлены для простой демонстрации в официальном учебнике https://glimmerjs.com/guides/). Каждая упаковка содержит dist/ Скопируйте несколько вариантов скриптов в следующую подпапку:

  • драм
  • CommonJS
  • модули
  • типы

Это заставляет меня думать, что я могу использовать Glimmer в качестве AMD lib без каких-либо вещей при сборке приложений. Я больше не использую ember-cli/broccoli или сборку / упаковку в целом. Я просто пытаюсь сделать наименьший возможный шаг, чтобы применить Glimmer в существующем приложении, и я не хочу вводить всю его магию построения конвейера.

Поэтому мой вопрос заключается в том, как создать и визуализировать компонент Glimmer во время выполнения, используя его шаблон в виде строки.

PS Ключевым моментом является не использование Glimmer в качестве AMD, а использование его без сборки.

1 ответ

Используйте игровую площадку TypeScript для переноса, а затем используйте экспортированный экспорт Glimmer в качестве эталона приложения. Например:

document.body.innerText += require;

requirejs.config({
    appDir: ".",
    baseUrl: "js"
    });
    
require([''],foo);


function foo(){
return define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.default = {
        types: {
            application: { definitiveCollection: 'main' },
            component: { definitiveCollection: 'components' },
            helper: { definitiveCollection: 'components' },
            renderer: { definitiveCollection: 'main' },
            template: { definitiveCollection: 'components' },
            util: { definitiveCollection: 'utils' },
            'component-manager': { definitiveCollection: 'component-managers' }
        },
        collections: {
            main: {
                types: ['application', 'renderer']
            },
            components: {
                group: 'ui',
                types: ['component', 'template', 'helper'],
                defaultType: 'component'
            },
            'component-managers': {
                types: ['component-manager']
            },
            utils: {
                unresolvable: true
            }
        }
    };
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>

Рекомендации

Другие вопросы по тегам