将打字稿库捆绑到一个 .js 文件和一个 .d.ts

Question

我正在使用 TypeScript 开发一个在 webbrowser 中使用的库。

我正在使用“system”作为--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;
    }
}

Well, I'm building it using gulp-typescript, I transpile it to es5 and create one .js and one .d.ts file per each .ts file. So far so good, I have a npm package and I can use my project from other npm projects. But ...

I want to use it from the webbrowser too. I would like to bundle all .js files in one and use this way:

<script src="~/Scripts/Ng2Emulation-bundle.js"></script>

I have generated a .d.ts file using dts-bundle and I have tried to bundle the .js files from two ways:

1. Using concat:

   gulp.src('dist/js/src/**/*.js') .pipe(concat('Ng2Emulation-bundle.js')) .pipe(gulp.dest('dist/release'));

2. Using 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"));

Two ways create the bundle but when I try to use it from the browser it tries to load each module, getting errors like:

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)

I'm using Visual Studio 2013, an MVC ASP.NET application. My main html (_layout.cshtml) is like it:

<script src="~/Scripts/Ng2Emulation-bundle.js"></script>

And this is my App/Boot.ts:

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)

I have tried to load the bundle via: <script src="~/Scripts/Ng2Emulation-bundle.js"></script> and remove the Ng2Emulation map from system.config but I don't have luck :(

I think that there is something that I don't understand in the bundle creation process or in the modules behaivor ...

How to bundle it? How could I do it?

Answer 1

是的，经过深入搜索，我找到了一种方法。\n我找到了systemjs 构建器项目。\n我在我的 gulp 文件中编写了一个任务，如下所示：

\n\n

gulp.task("system-builder", function () {\n    var builder = new Builder(\'dist/js/src\');\n\n    builder.config({\n        meta: {\n            \'HTML5Tokenizer.js\': { // HTML5Tokenizer is a external m\xc3\xb3dule\n                build: false       // Not to include in a bundle.\n            }\n        },\n        defaultJSExtensions: true\n    });\n\n    builder\n        .bundle(\'Ng2Emulation.js\', \'dist/release/Ng2Emulation-bundle.js\')\n        .then(function () {\n            console.log(\'Build complete\');\n        })\n        .catch(function (err) {\n            console.log(\'Build error\');\n            console.log(err);\n        });\n});\n

\n\n

我在 Angular2 gulp 文件中发现了它：D\n现在我可以使用 htmlscript标签包含该文件，我的 html 是这样的：

\n\n

<script src="~/Scripts/simple-html-tokenizer.js"></script>\n<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.15/system.src.js"></script>\n<script type="text/javascript">\n    // set our baseURL reference path\n    System.config({\n        baseURL: \'/TypeScript\',\n        map: {\n            "HTML5Tokenizer": "/Scripts/simple-html-tokenizer.js"\n        }\n    });\n    System.defaultJSExtensions = true;\n</script>\n<script src="~/Scripts/Ng2Emulation-es5.js"></script>\n<script type="text/javascript">\n\n    System.import(\'App/Boot\');\n</script>\n

\n\n

它就像一个魅力。

\n\n

不过，如果有人知道其他方法，我想知道。\n我不明白什么 mudule 系统更好，当使用一种或另一种时，...

\n