Multiple anonymous defines in module Typescript with Riot-ts (Riotjs)

问题

Have to say that setting up the environment for Typescript is laborious and fraught with frustration. It's not a straight forward task by any means.

Anyway: I am still trying to setup riot-ts with JSPM. I have gotten further along, but it's not working correctly.

I now have the following:

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);

Layout of files:

  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';

resulting app.js file:

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;
});

Failing message in chrome console: undefined:1 Uncaught (in promise) Error: Error: Multiple anonymous defines in module http://0.0.0.0:8080/js/app.js(…) There is only one import, and SystemJS barfs.

There are no compile errors from Typescript. This one is coming from SystemJS.

Codebase: https://github.com/sidouglas/riot-ts

回答1:

Used /// <amd-module name="ModuleName"/> at the start of each file, so SystemJS could infer the module name. Gets the job done, although it's not a clean solution.

来源：https://stackoverflow.com/questions/37650736/multiple-anonymous-defines-in-module-typescript-with-riot-ts-riotjs