Question

我有一个非常简单的程序来学习如何使用TypeScript，我使用Browserify捆绑了所有.ts文件，以便在浏览器中运行。

想象一下TypeScript中非常简单的变量声明：

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);轻松调用它，但它会返回错误：

未捕获的ReferenceError：未定义testVar

这是已编译的+捆绑的.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文件中的函数和变量？如何在TypeScript中设计我的库的API？（任何好的资源）

Answer 1

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

这应该是您在Gulp上的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);
}

现在只需运行您的gulp build任务（将编译和浏览/捆绑您的ts文件），将捆绑的脚本包含到您的页面中，打开Chrome控制台（F12）和里面控制台选项卡只需在standalone任务中写下您为browserify定义的内容的名称（此处我们将其命名为yourLib）。

对于我们的示例，您只需在控制台中键入此内容即可获得响应：

yourLib.whatsYourName("Alex");

Answer 2

如何在TypeScript中设计我的库的API？（任何好的资源）

真的是一个构建工具链问题。如果您希望将库公开为全局，则答案取决于您的工具链。我建议使用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。

如何从.ts文件中调用TypeScript函数？

2 个答案: