GlimmerJS:如何使用Glimmer作为lib(例如AMD)而不使用ember-cli / broccoli构建

时间:2017-07-11 11:45:41

标签: javascript glimmer.js

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

  • AMD
  • CommonJS的
  • 模块
  • 类型

这让我觉得我可以在没有应用程序管道构建的情况下使用Glimmer作为AMD lib。 我不会再使用ember-cli /西兰花或建筑/包装我只是想在现有的应用程序中采取尽可能小的步骤来采用Glimmer并且我不想全部介绍它的建筑管道魔术。

所以我的问题是如何在运行时创建和呈现Glimmer组件,并将其模板作为字符串。

P.S。关键点不是使用Glimmer作为AMD而是使用它而不构建它。

1 个答案:

答案 0 :(得分:0)

使用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>
&#13;
&#13;
&#13;

<强>参考