将打字稿库打包为一个.js文件和一个.d.ts

我正在开发一个库，以便在使用TypeScript的Web浏览器中使用该库。将打字稿库打包为一个.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，我transpile它到es5和每个.ts文件创建一个.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"));

两种方式创建的包，但是当我尝试从浏览器中使用它，它会尝试加载每个模块，让这样的错误：

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地图，我没有运气:(

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

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

来源

2016-01-12 Javier Ros

是的，深入搜索后，我找到了一种方法。我找到systemjs builder项目。我在一饮而尽文件写了一个任务，这样一来：

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系统更好，当使用一个或其他，...

来源

2016-01-13 07:38:55

将打字稿库打包为一个.js文件和一个.d.ts

回答

相关问题