1

不得不说，为 Typescript 搭建环境是费力的，也是充满挫败感的。无论如何，这不是一项简单的任务。

无论如何： 我仍在尝试使用 JSPM 设置 riot-ts。我已经走得更远了，但它不能正常工作。

我现在有以下内容：

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"
  }
 }
}

包.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 控制台中的失败消息：undefined:1 Uncaught (in promise) 错误：错误：模块http://0.0.0.0:8080/js/app.js (...)中的多个匿名定义 只有一个导入，并且 SystemJS barfs .

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

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

4

1 回答 1

1

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

于 2016-06-06T23:08:19.430 回答