将打字稿库打包成一个.js文件和一个.d.ts文件
我正在开发一个库，使用TypeScript在网页浏览器中使用。
我正在编写单独的打字稿文件作为模块使用“系统”作为 – 模块，例如这是主要文件：
/// <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 gulp-typescript typescript来构build它，我将它转换为es5 ，并为每个.ts文件创build一个.js和一个.d.ts文件。 到目前为止，我有一个npm包，我可以使用其他npm项目中的项目。 但是…
我也想从网页浏览器使用它。 我想将所有的.js文件合并到一个文件中，并使用这种方式：
<script src="~/Scripts/Ng2Emulation-bundle.js"></script>
我已经使用dts-bundle生成了一个.d.ts文件，并试图从两种方式打包.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"));
有两种方式创build捆绑包，但是当我尝试从浏览器中使用它时，它会尝试加载每个模块，出现如下错误：
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>并从system.config删除Ng2Emulation映射，但我没有运气:(
我认为，有一些我不明白的创build过程中或在模块行为…
如何捆绑它？ 我怎么能这样做？
是的，经过深入的search，我find了一条路。 我已经find了systemjs构build器项目。 我已经写了一个任务在我的大文件中，这样：
gulp.task("system-builder", function () { var builder = new Builder('dist/js/src'); builder.config({ meta: { 'HTML5Tokenizer.js': { // HTML5Tokenizer is a external módule build: false // Not to include in a bundle. } }, defaultJSExtensions: true }); builder .bundle('Ng2Emulation.js', 'dist/release/Ng2Emulation-bundle.js') .then(function () { console.log('Build complete'); }) .catch(function (err) { console.log('Build error'); console.log(err); }); });
我发现它看Angular2吞噬文件：D现在我可以使用HTML script标记包括该文件，我的HTML是这样的：
<script src="~/Scripts/simple-html-tokenizer.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.15/system.src.js"></script> <script type="text/javascript"> // set our baseURL reference path System.config({ baseURL: '/TypeScript', map: { "HTML5Tokenizer": "/Scripts/simple-html-tokenizer.js" } }); System.defaultJSExtensions = true; </script> <script src="~/Scripts/Ng2Emulation-es5.js"></script> <script type="text/javascript"> System.import('App/Boot'); </script>
它像一个魅力。
不过，如果有人知道其他的方法，我想知道。 我不明白什么mudule系统是更好的，当使用一个或其他，…