将 typescript 库捆绑到一个 .js 文件和一个 .d.ts答案

【问题标题】：Bundle a typescript library to one .js file and one .d.ts将 typescript 库捆绑到一个 .js 文件和一个 .d.ts
【发布时间】：2016-01-12 16:19:18
【问题描述】：

我正在使用 TypeScript 开发一个在网络浏览器中使用的库。

我正在编写单独的打字稿文件作为模块使用“系统”作为--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 并为每个 .ts 文件创建一个 .js 和一个 .d.ts 文件。到目前为止一切顺利，我有一个 npm 包，我可以从其他 npm 项目中使用我的项目。但是……

我也想通过网络浏览器使用它。我想将所有 .js 文件捆绑在一起并使用这种方式：

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

我使用dts-bundle 生成了一个 .d.ts 文件，并尝试通过两种方式捆绑 .js 文件：

使用连接：

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> 加载捆绑包并从system.config 中删除Ng2Emulation 映射，但我没有运气:(

我认为在包创建过程或模块行为中有些东西我不明白......

如何捆绑它？我该怎么办？

【问题讨论】：

标签： javascript node.js typescript gulp tsify

【解决方案1】：

是的，经过深入搜索，我找到了一种方法。我找到了systemjs builder 项目。我在我的 gulp 文件中写了一个任务，这样：

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 gulp 文件：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系统哪个更好，当使用一个或另一个时，......

【讨论】：