GlimmerJS:如何使用 Glimmer 作为库(例如 AMD)，而无需使用 ember-cli/broccoli

Question

GlimmerJS提供了一堆npm包(实际上在官方教程 https://glimmerjs.com/guides/中安装了20个包用于简单演示(。每个包dist/文件夹中都包含以下子文件夹中的几种脚本变体：

• AMD
• 通用
• 模块
• 类型

这让我觉得我可以将 Glimmer 用作 AMD 库，而无需其应用程序管道构建内容。 我并不反对使用 ember-cli/西兰花或一般的建筑/包装，我只是想采取尽可能小的步骤在现有应用程序中采用 Glimmer，我不想引入它所有的建筑管道魔法。

所以我的问题是如何在运行时创建和渲染一个 Glimmer 组件，其模板为字符串。

附言：关键点不是将Glimmer用作AMD，而是无需构建即可使用它。

Answer 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>

引用

• RequireJS 作为外部依赖项：jsfiddle

• 微光旋转变压器配置

• glimmerjs/glimmer-resolver

• 在 Backbone 中使用 jquery 插件和 requireJS

• 需要 JS 导入文档

• 游乐场 ·打字稿

• 构建自己的 API 操场 – Contosio 实验室