代码之家 › 专栏 › 技术社区 › Simon

模块中多个匿名定义Typescript with Riot ts(Riotjs)

riot.js systemjs typescript javascript

Simon · 技术社区 · 9 年前

不得不说,为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"
    }
  }
}

吞咽管(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';

结果应用程序。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未捕获(承诺中)错误:错误:模块中有多个匿名定义 http://0.0.0.0:8080/js/app.js () 只有一个导入,SystemJS barfs。

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

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

1 回复 | 直到 7 年前

Simon 9 年前

习惯于 /// <amd-module name="ModuleName"/> 因此SystemJS可以推断模块名称。完成工作,尽管这不是一个干净的解决方案。