使用typescript将小sdk构建到一个js文件

时间:2017-08-01 20:49:53

标签: javascript typescript

我正在尝试构建用typescript编写的小型sdk库。我的想法是创建包含许多ts文件的项目,这些文件可以编译为一个js,我的库可以像 foo.bar.myPublicClasses

一样访问

最重要的评论我不想在简单的html页面上使用它,我的环境是Dynamics CRM,所以包括JavaScript在普通的html脚本include标签中都没有完成,并且加载JavaScript是在异步的情况下完成的构建Dynamics CRM的框架。这就是为什么我需要将我的库捆绑到一个文件的原因。 因此,总结一下,我需要一个捆绑的js文件,它与d.ts文件没有任何依赖关系,所以它可以在其他打字稿文件上重用。 除了从Dynamics CRM运行我的js代码之外我还需要任何全局函数,我的方法是在类foo.bar.mylibrary.sdk.create()上的一些静态函数

我的项目结构可能如下所示:


 src/
 |-bundle.ts
 |-classes/
 | |-classA.ts
 | |-classB.ts
 | 
 |-interfaces/
 | |-IInterface1.ts
 | -IInterface2.ts
 |
 |-Helpers/
 | |-HelperA.ts
 | |-HelperA.ts
 |
 dist/
 | -myLibrary.js

我想要.ts文件更像是我每个类都要编写一个C#代码文件等。

版本1 我最初的方法是使用命名空间,但我不确定这是否是在长期项目中做到这一点的最佳方式。在那个apporach中我在我的命名空间中写了所有ts文件,对我来说只有一个难闻的气味就是在组合的js文件中每个ts文件都会写出来

//a.ts
namespace foo.bar.mylibrary{
    class a {
        isOk:boolean;
    }
    export class b {
        constructor(){
            let test = new a();
            test.isOk = false;
        }
    }
}
//b.ts
namespace foo.bar.mylibrary{
    export class sdk{
        public isStart:boolean;
        public static Create(){
            //initialize my sdk
        }
    }
}

编译到

"use strict";
// b.ts
var foo;
(function (foo) {
    var bar;
    (function (bar) {
        var mylibrary;
        (function (mylibrary) {
            var a = (function () {
                function a() {
                }
                return a;
            }());
            var b = (function () {
                function b() {
                    var test = new a();
                    test.isOk = false;
                }
                return b;
            }());
            mylibrary.b = b;
        })(mylibrary = bar.mylibrary || (bar.mylibrary = {}));
    })(bar = foo.bar || (foo.bar = {}));
})(foo || (foo = {}));
var foo;
(function (foo) {
    var bar;
    (function (bar) {
        var mylibrary;
        (function (mylibrary) {
            var sdk = (function () {
                function sdk() {
                }
                sdk.Create = function () {
                    //initialize my sdk
                };
                return sdk;
            }());
            mylibrary.sdk = sdk;
        })(mylibrary = bar.mylibrary || (bar.mylibrary = {}));
    })(bar = foo.bar || (foo.bar = {}));
})(foo || (foo = {}));

也许有更好的方法来编译这些ts文件。

我的tsconfig包含模块 - commonjs,outputfile - myLibrary.js

版本2 根据typescript文档,现在使用外部模块会更好,但是我不确定编译的js是否是我看到的,不会将导出的类编译为简单的var对象,导出的类是在定义的函数中。

//a.ts
    class a {
        isOk:boolean;
    }
    export class b {
        constructor(){
            let test = new a();
            test.isOk = false;
        }
    }

//b.ts

    export class sdk{
        public isStart:boolean;
        public static Create(){
            //initialize my sdk
        }
    }
//build.ts
export {sdk} from "./src/b";

编译到

define(["require", "exports", "./src/classb"], function (require, exports, classb_1) {
    "use strict";
    function __export(m) {
        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
    }
    Object.defineProperty(exports, "__esModule", { value: true });
    // export * from "./src/classa";
    __export(classb_1);
});

然后我需要捆绑我需要的模块,但我不知道如何以正确的方式进行。

我的tsconfig包含模块 - amd,outputfile - myLibrary.js

我假设要完成我的库我应该吞下一些其他工具包,但任何人都可以给我一些提示或怎么做?

1 个答案:

答案 0 :(得分:0)

这是我的tsconfig.json,它只转换为单个js文件

{
  "compilerOptions": {
    "module": "amd",
    "target": "es5",
    "sourceMap": true,
    "outFile": "../public/js/yourfile.js"
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}