使用 Riot-ts (Riotjs) 在模块 Typescript 中定义多个匿名
Multiple anonymous defines in module Typescript with Riot-ts (Riotjs)
不得不说,为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 控制台中的失败消息:undefined:1 未捕获(承诺)错误:错误:模块 http://0.0.0.0:8080/js/app.js(…)[=41 中的多个匿名定义=]
只有一个导入,SystemJS barfs.
Typescript 没有编译错误。这个来自 SystemJS。
在每个文件的开头使用 /// <amd-module name="ModuleName"/>
,因此 SystemJS 可以推断模块名称。完成工作,尽管这不是一个干净的解决方案。
不得不说,为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 控制台中的失败消息:undefined:1 未捕获(承诺)错误:错误:模块 http://0.0.0.0:8080/js/app.js(…)[=41 中的多个匿名定义=] 只有一个导入,SystemJS barfs.
Typescript 没有编译错误。这个来自 SystemJS。
在每个文件的开头使用 /// <amd-module name="ModuleName"/>
,因此 SystemJS 可以推断模块名称。完成工作,尽管这不是一个干净的解决方案。