Question

您好我有一个非常简单的Typescript模块

export module myFirstPackage {
    export class test {
        description : string
        constructor() {
            this.description = "This is a test module class";
        }

        public getDescription() {
            return this.description;
        }

    }

    export function printDescription() : string {
        alert(new test().getDescription);
    }
}

我生成了javascript文件并对其进行了解释，然后我尝试将另一个javascript应用程序中的uglified文件用作库，但是如何才能获得ts生成的javascript处理程序？我根本无法通过我的模块名称访问它。

我通过gulp uglificationt

我的gulp文件如下所示

var gulp = require("gulp");
var watchify = require("watchify");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var gutil = require("gulp-util");
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');

//Variables
var conf = {
    html: ['src/html/**/*.html'],
    scss: ['src/scss/**/*.scss'],
    jsdistAll: 'src/js/',
    jsdist: 'www/js/',
    htmldist: 'www/templates/',
    cssdist: 'www/css/',
    jsfilename: 'all.js',
    cssfilename: 'style.css',
    tsentry: 'src/ts/main.ts',
    debugts: true
};
//TS code handling
var watchedBrowserify = watchify(browserify({
    basedir: '.',
    debug: conf.debugts,
    entries: [conf.tsentry],
    cache: {},
    packageCache: {}
}).plugin(tsify));

function bundle() {
    return watchedBrowserify
        .bundle()
        .pipe(source(conf.jsfilename))
        .pipe(gulp.dest(conf.jsdistAll))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(conf.jsdist));
}

watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", gutil.log);

//Html handling
gulp.task("html", function () {
    return gulp.src(conf.html)
        .pipe(gulp.dest(conf.htmldist));
});

//Css handling
gulp.task('sass', function() {
    return gulp.src(conf.scss)
        .pipe(sourcemaps.init())
        .pipe(sass({includePaths : ['_/'+conf.scss]}).on('error', sass.logError))
        .pipe(gulp.dest(conf.cssdist))
        .pipe(minifyCss({
            keepSpecialComments: 0
        }))
        .pipe(rename({ extname: '.min.css' }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(conf.cssdist))
});

//Watch task
gulp.task('watch', function() {
    gulp.watch(conf.html, ['html']);
    gulp.watch(conf.sass, ['sass']);
});

//initialize task
gulp.task("default", ["html", "sass", "watch"], bundle);

该行的另一个问题是html的监视工作，但不适用于sass。

Answer 1

这与缩小无关，但是使用浏览器确定模块的范围（应该是这样）。您需要告诉browserify明确公开您的模块和require函数。

在gulp中添加到您的browserify链中：

.require(fooFilename, { expose: "foo" })

......在你项目的另一半：

var foo = require("foo");
foo.fooExport;

顺便说一句，标准缩小不应该对任何可访问产生影响。

另一方面你可以简单地不使用ES6模块，当您删除命名空间前面的顶级导出语句时会发生这种情况在那里使用旧的模块关键字，但这实际上现在称为 namespace 。在这种情况下，您不需要浏览器，只需 gulp-typescript 或其他东西，然后连接您的输出。

打字稿生成的javascript（通过gulp缩小）在另一个javascript

1 个答案: