javascript - 使用 Riot-ts (Riotjs) 在 Typescript 模块中进行多个匿名定义

Question

不得不说，为 Typescript 设置环境是费力且充满挫败感的。无论如何，这都不是一项直接的任务。

无论如何: I am still trying to setup riot-ts with JSPM.我已经取得了进一步的进展，但它无法正常工作。

我现在有以下内容:

tsd.json:

{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "master",
"path": "typings",
"bundle": "typings/tsd.d.ts",
"installed": {
  "jquery/jquery.d.ts": {
    "commit": "1be72cdce38fa12471085ac2cf39b0a901321720"
  },
  "riotjs/riotjs.d.ts": {
    "commit": "1be72cdce38fa12471085ac2cf39b0a901321720"
  },
  "requirejs/require.d.ts": {
    "commit": "1be72cdce38fa12471085ac2cf39b0a901321720"
  }
 }
}

package.json:

  {
  "devDependencies": {
    "elixir-jasmine": "0.0.4",
    "gulp": "^3.9.1",
    "jspm": "^0.16.35",
    "jspm-bower": "0.0.3",
    "jspm-bower-endpoint": "^0.3.2",
    "laravel-elixir": "^6.0.0-2",
    "laravel-elixir-browsersync": "^0.1.5",
    "tsd": "^0.6.5",
    "typescript": "^1.9.0-dev.20160605-1.0",
    "ws-laravel-elixir-typescript": "git+https://github.com/we-studio/laravel-elixir-typescript.git"
  },
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.2"
  },
  "jspm": {
    "directories": {
      "baseURL": "public"
    },
    "dependencies": {
      "jquery": "npm:jquery@^2.2.4",
      "riot-ts": "bower:riot-ts@^0.0.22"
    },
    "devDependencies": {
      "typescript": "npm:typescript@^1.6.2"
    }
  }
}

gulpfile(laravel):

function build(mix) {
mix.sass('main.scss')
    .typescript('app.js', undefined, {
        "removeComments": true,
        "module": "amd",
        "target": "ES5",
        "experimentalDecorators": true,
        "sourceMap": true,
        "moduleResolution": "node"
    })
}
elixir(build);

文件布局:

  root
      ↳/typings
      ↳/assets
        ↳/sass
        ↳/typescript
            ↳/stockmarket
              ↳index.ts
                ↳/barchart
                   ↳index.ts // export default class StockMarketBarChart extends Riot.Element
         ↳boot.ts [contains: /// <reference path="../typings/tsd.d.ts" />]
                             // import StockMarketBarChart from './typescript/stockmarket/barchart';

生成的 app.js 文件:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports"], function (require, exports) {
    "use strict";
    var StockMarketBarChart = (function (_super) {
        __extends(StockMarketBarChart, _super);
        function StockMarketBarChart() {
            _super.call(this);
        }
        StockMarketBarChart.prototype.mounted = function () {
            debugger;
        };
        StockMarketBarChart = __decorate([
            template("\n<stockmarket-barchart>\n  <h3>{opts.title}</h3>\n  <svg class=\"chart\" id=\"{chartId}\"></svg>\n</stockmarket-barchart>\n")
        ], StockMarketBarChart);
        return StockMarketBarChart;
    }(Riot.Element));
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.default = StockMarketBarChart;
});

define(["require", "exports"], function (require, exports) {
    "use strict";
});

define(["require", "exports"], function (require, exports) {
    "use strict";
    var default_1 = (function () {
        function default_1() {
        }
        return default_1;
    }());
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.default = default_1;
});

chrome 控制台中的失败消息:未定义:1 未捕获( promise 中)错误:错误:模块 http://0.0.0.0:8080/js/app.js 中存在多个匿名定义(…)只有一个导入，SystemJS barfs。

Typescript 没有编译错误。这个来自 SystemJS。

代码库:https://github.com/sidouglas/riot-ts

Answer 1

二手/// <amd-module name="ModuleName"/>在每个文件的开头，这样 SystemJS 就可以推断出模块名称。完成工作，尽管这不是一个干净的解决方案。