Я разрабатываю библиотеку для использования в веб-браузере с использованием TypeScript.Связать библиотеку машинописных файлов с одним файлом .js и одним .d.ts
Я пишу отдельные машинопись файлы в виде модулей, используя «систему», как --module, например, это основной файл:
/// <reference path="../typings/tsd.d.ts" />
/// <reference path="./typings/simple-html-tokenizer/simple-html-tokenizer" />
export * from "./Decorators/Component";
export * from "./Decorators/Directive";
export * from "./Decorators/Inject";
export * from "./Decorators/Injectable";
export * from "./Events/EventEmitter";
export * from "./Core/Bootstrap";
export * from "./Decorators/Output";
export * from "./Decorators/Input";
export {OnChanges, OnInit, OnDestroy} from "./Core/LifeCycle/LifeCycleHooks";
И это первый модуль:
import {serviceNormalize} from "../Utils/AngularHelpers";
export interface IComponentMetadata {
template?: string;
templateUrl?: string;
selector?: string;
directives?: Function[];
outputs?: string[];
inputs?: string[];
styles?: string[];
providers?: (Function|string)[];
}
/**
* Register metadata into class to be used by bootstrap.
*/
export function Component(componentMetadata: IComponentMetadata) {
return (target: any) => {
/// ...
/// ...
/// ...
return target;
}
}
Ну, я строю его с помощью gulp-typescript, я перетаскиваю его на es5 и создаю один .js и один .d.ts файл за каждый файл .ts. Пока что так хорошо, у меня есть пакет npm, и я могу использовать свой проект из других проектов в npm. Но ...
Я хочу использовать его и из веб-браузера. Я хотел бы, чтобы связать все .js файлы в одном и использовать этот способ:
<script src="~/Scripts/Ng2Emulation-bundle.js"></script>
Я формировала .d.ts файл, используя dts-bundle и я попытался связывайте .js файлы из двух способов:
Использование CONCAT:
gulp.src('dist/js/src/**/*.js') .pipe(concat('Ng2Emulation-bundle.js')) .pipe(gulp.dest('dist/release'));Использование tsify:
browserify() .add('src/ng2emulation.ts') .plugin(tsify, { noImplicitAny: false }) .bundle() .on('error', function (error) { console.error(error.toString()); }) .pipe(gulp.dest("Ng2Emulation-bundle.js"));
Два способа создания сверток, но когда я пытаюсь использовать его из браузера он пытается загрузить каждый модуль, получать ошибки как:
GET http://localhost:55411/Utils/AngularHelpers.js 404 (Not Found)D @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:4V @ system.js:5t.metadata.deps @ system.js:5r @ system.js:5n @ system.js:5r @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:4
system.js:4 GET http://localhost:55411/Templates/HttpInterceptor.js 404 (Not Found)D @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:4V @ system.js:5t.metadata.deps @ system.js:5r @ system.js:5n @ system.js:5r @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:4
system.js:4 GET http://localhost:55411/Directives/NgProperty.js 404 (Not Found)D @ system.js:4(anonymous function) @ system.js:4(anonymous function) @ system.js:4V @ system.js:5t.metadata.deps @ system.js:5r @ system.js:5n @ system.js:5r @ system.js:5(anonymous function) @ system.js:5(anonymous function) @ system.js:4
system.js:4 GET http://localhost:55411/Templates/HtmlParser/Parser.js 404 (Not Found)
Я использую Visual Studio 2013 , приложение MVC ASP.NET. Мой главный HTML (_layout.cshtml) является, как это:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="~/node_modules/angular-material/angular-material.css" rel="stylesheet"/>
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-aria.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script src="~/node_modules/angular-material/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.15/system.js"></script>
<script type="text/javascript">
// set our baseURL reference path
System.config({
baseURL: '/TypeScript',
map: {
"HTML5Tokenizer": "/Scripts/simple-html-tokenizer.js",
"Ng2Emulation": "/Scripts/Ng2Emulation-es5.js"
}
});
System.defaultJSExtensions = true;
System.import('App/Boot');
</script>
</head>
<body>
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>
И это мой App/Boot.ts:
import {bootstrap, Component} from "Ng2Emulation";
@Component({
selector: "my-app",
template: "<h1>My First Angular 2 App</h1>"
})
export class AppComponent { }
bootstrap(AppComponent);
Я пытался загрузить пакет с помощью: <script src="~/Scripts/Ng2Emulation-bundle.js"></script> и удалить Ng2Emulation карту от system.config но Мне не повезло :(
Я думаю, что есть что-то, что я не понимаю в процессе создания пакета или в модулях behaivor ...
Как связать его? Как я мог это сделать?