Extracting typescript exports to json file using g

2019-09-10 15:59发布

问题:

I have several typescript files, some of them export a certain var - named APIS - which is an array of objects. I want to extract the values of all of these exports, and pipe them to a json file using gulp.

For example, I have a folder named services, with 3 files: service1.ts, service2.ts, service3.ts.

service1.ts:

...
export const APIS = [ { "field1" : "blabla" } ];

service2.ts:

...
export const APIS = [ { "field2" : "yadayada" }, { "field3" : "yadabla" } ];

service3.ts: - does not export the APIS var.

I want to use gulp in oder create a json file that looks something like this:

[ { "field1" : "blabla" }, { "field2" : "yadayada" }, { "field3" : "yadabla" } ]

gulpfile.js - the ??? is a placeholder for the missing code.

gulp.task('default', function () {
    return gulp.src('.../services/*.ts')
            .pipe(???)
            .pipe(concat('export.json'))
            .pipe(gulp.dest('./test'));
});

I'm new to both typescript & gulp, so I'm not sure how to achieve this... any ideas? :)

EDIT: So, I understand that there's no OOTB solution for this, and I need to writer my own task / plugin. I'm not really sure how to achieve that, though. Ideally, what I want is to find a gulp plugin (or a combination of plugins) that can handle ts / js files as objects with properties. Then I can extract the var I need from the file.

I couldn't really find something like that, only string manipulation plugins - Treating my ts file as a string and using search with regex seems overly complicated to me. Is there something I'm missing here? is there a more straight-forward way to do this?

回答1:

The typescript compiler API is relevant here, as this is what you need to parse and understand the ts-code properly. Unfortunately, I don't think there is a gulp plugin that implements this API.

I think your best bet is to change strategy completely here and solve your problem in another way, or to use regex to try to extract the constants that you want. Unless you want to write your own gulp-plugin using the compiler API.



回答2:

This is what I ended up doing, and it worked for me. I'm positing it here in case anyone else finds it useful. :)

Instead of .ts, I saved the exports in .js files, i.e:

service2.export.js:

exports.APIS = [ { "field2" : "yadayada" }, { "field3" : "yadabla" } ];

Based on the answer given here: https://stackoverflow.com/a/36869651/3007732 I created a gulp task as following:

var gulp = require('gulp');
var concat = require('gulp-concat');
var map = require('gulp-map');
var fs = require('fs');

var allServices;

gulp.task('default', function() {

    var allServices = [];

    var stream = gulp.src('./**/*.export.js')
        .pipe(map(function(file) {
            var obj = require(file.path);
            if (obj.APIS != null) {
                allServices.push.apply(allServices, obj.APIS);
            }
            return file;
        }));

    stream.on("end", function (cb)
    {   
        fs.writeFile('./export.json', JSON.stringify(allServices), cb);
    });

    return stream;
});

and now I get the following output in export.json:

[ { "field1" : "blabla" }, { "field2" : "yadayada" }, { "field3" : "yadabla" } ]

which is exactly what I wanted.