如何调用打字稿功能出.ts文件的？

Question

我有一个非常简单的程序来学习如何使用打字稿工作，我用Browserify，使其能够在浏览器内运行捆绑我的所有.ts文件。

试想一下，很简单的变量声明中打字稿：

main.ts 
let testVar = "Something"; 

这里是我的gulpfile.js编译（并在需要时捆绑文件）：

'use strict'; 

var gulp = require('gulp'); 
var browserify = require("browserify"); 
var source = require('vinyl-source-stream'); 
var tsify = require("tsify"); 
var buffer = require('vinyl-buffer'); 
var sourcemaps = require('gulp-sourcemaps'); 
var minify = require('gulp-minify'); 


gulp.task('build',['minify'], function() { 

    return browserify({ 
     basedir: '.', 
     debug: true, 
     entries: ['src/main.ts'], 
     cache: {}, 
     packageCache: {} 
    }) 
     .plugin(tsify) 
     .bundle() 
     .pipe(source('main.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({loadMaps: true})) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest("dist")); 

}); 

gulp.task('minify',function() { 
    gulp.src('dist/main.js') 
     .pipe(minify({ 
      ext:{ 
       src:'.js', 
       min:'.min.js' 
      }, 
      ignoreFiles: ['.min.js'] 
     })) 
     .pipe(gulp.dest('dist')); 
}); 

，这是我tsconfig.json

{ 
    "compilerOptions": { 
    "module": "system", 
    "sourceMap": true, 
    "lib": ["dom", "es2015.promise", "es5"], 
    "noImplicitAny": true, 
    "target": "es2015" 
    }, 
    "exclude": [ 
    "node_modules" 
    ], 
    "include": [ 
    "src/**/*" 
    ], 
    "files": [ 
    "src/**/*" 
    ] 
} 

像预期的那样构建任务工作，我在打字稿里面的内容也很有效。但是，当我将捆绑并编译到我的.html文件中，并尝试访问testVar变量时。通过只是轻松地调用它在Chrome控制台，console.log(testVar);但它返回的错误：

Uncaught ReferenceError: testVar is not defined

，这里是编译+捆绑.js文件：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ 
let testVar = "Something"; 
},{}]},{},[1]) 

//# sourceMappingURL=main.js.map 

如何访问的函数和变量绑定的内.js文件？ 如何设计我的打字稿库的API？ （任何好资源）

Answer 1

你的代码应该按预期工作，你只需要单独添加到您的Browserify配置

这应该是上咕嘟咕嘟您Browserify任务：

return browserify({ 
     standalone: "yourLib", 
     basedir: '.', 
     debug: true, 
     entries: ['src/main.ts'], 
     cache: {}, 
     packageCache: {}, 
    }) 

看standalone: "yourLib"。

---

现在你需要导出的东西在你的main.ts文件，例如：

//main.ts 
export function whatsYourName(name:string){ 
console.log(name); 
} 

现在只需运行一饮而尽build任务（这将编译和browserify /捆绑您的TS文件） ，包括捆绑的脚本到您的网页，打开Chrome控制台（F12）和控制台选项卡里面只写你的standalone在browserify任务定义什么名字（在这里我们命名的yourLib）。

对于我们的例子，你只需要在控制台中输入此获得响应：

yourLib.whatsYourName("Alex"); 

Answer 2

How to design API of my library in TypeScript? (any good resource)

真的是一个构建工具链问题。如果你想把你的图书馆作为一个全球公开的答案取决于你的工具链。我建议使用webpack。这里是一个示例配置：

module.exports = { 
    /** Build from built js file */ 
    entry: { 
     typestyle: './lib/index.js', 
    }, 
    output: { 
     filename: './umd/typestyle.js', 
     libraryTarget: 'umd', 
     /** The library name on window */ 
     library: 'typestyle' 
    } 
}; 

从TypeStyle project。