如何打包浏览器用户gulp和tsproject的打字稿文件？ [英] How to bundle typescript files for the browser user gulp and tsproject?

问题描述

我对前端开发很陌生，是一个很长时间的后端C＃和Java开发人员，我正在努力处理如何构建前端应用程序。我想使用typescript构建一个应用程序，并使用gulp作为我的构建管道，将我的代码转换，捆绑和缩小为一个JavaScript文件。

为此，我一直在寻找节点模块 tsproject ，据我所知，它应该是做正是我想要的。 - （。

这是我的gulpfile.js的相关部分：

  var gulp = require（'gulp'）; 
 var clean = require（'gulp-clean'）; 
 var tsproject = require （'tsproject'）; 
 
 gulp.task（'default'，['min-js']）; 
 
 gulp.task（'clean'，function（） {
 return gulp 
 .src（'./ dist /'，{read：false}）
 .pipe（clean（））; 
}）; 
 
 gulp.task（'min-js'，['clean']，function（）{
 return tsproject 
 .src（'./ tsconfig.json'）
。管（gulp.dest（'./ dist / js'））
}）; 
  

和我的tsconfig.json：

  {
compilerOptions：{$ b $sourceMap：true ，
noImplicitAny：true，
module：commonjs，
target：es5，
jsx：react，
outDir：./
}，
文件：[
./src/**/*.tsx，
./src/**/*.ts
，
bundles：{
 myApp：{
files：[
./src/App.tsx
，
config：{
minify：true ，
sourcemap：true 
} 
} 
} 
} 
  

我曾预计这会输出一个包含经过转换的，捆绑和缩小的JavaScript代码的js文件，但是我得到的是一个捆绑的（未经转换或缩小的）Typescript文件（./dist/js/

我做错了什么，或者我完全误解了tsproject的目的和意图？

解决方案

嗯，我不确定这是否是最好的方式去做，但我终于得到了这样一个大文件的工作：

  var gulp = require（'gulp'）; 
 var browserify = require（'gulp-browserify'）; 
 var clean = require（'gulp-clean'）; 
 var concat = require（'gulp-concat'）; 
 var sourcemaps = require（'gulp-sourcemaps'）; 
 var ts = require（'gulp-typescript'）; 
 var uglify = require（'gulp-uglify'）; 
 
 gulp.task（'default'，['min-js']）; 
 
 gulp.task（'clean'，function（）{
 return gulp 
 .src（[
'./tmp/'，
' ./dist/'
]，{read：false}）
 .pipe（clean（））; 
}）; 
 $ b $ gulp.task（'transpile-ts'，['clean']，function（）{
 var tsproject = ts.createProject（'./ src / tsconfig.json'）; 
 return tsproject 
 .src（）
 .pipe（sourcemaps.init（））
 .pipe（tsproject（））.js 
 .pipe（sourcemaps.write （'./sourcemaps'））
 .pipe（gulp.dest（'./ tmp / js'））; 
}）; 
 
 gulp.task（'min-js'，['transpile-ts']，function（）{
 return gulp 
 .src（'./ tmp / js / App.js'）
 .pipe（sourcemaps.init（{loadMaps：true}））
 .pipe（browserify（））
 .pipe（uglify（））
。 pipe（concat（'App.min.js'））
 .pipe（sourcemaps.write（'./sourcemaps'））
 .pipe（gulp.dest（'./ dist / js'） ）
}）; 
  

基本上，我将所有TypeScript文件转换为Javascript，并将CommonJS导入临时目录。然后，我使用Browserify将JavaScript文件打包（即解析CommonJS导入）为单个文件。最后，我缩小了生成的JavaScript文件。 Voila！

出于某种原因，我必须首先将转储的文件写入临时目录，然后捆绑并缩小这些文件。而不是继续将 pipe（tsproject（））的结果传递给 browserify（） ...

I'm kinda new to front end development, being a long time backend C# and Java developer, and I'm trying to come to grips with how to build front end applications. I would like to build an application using typescript and use gulp for my build pipeline to transpile, bundle and minify my code to a single JavaScript file.

For this purpose, I have been looking at the node module tsproject which, as far as I can understand, is supposed to do exactly what I want. Except, I can't get it to do what I want :-(.

This is the relevant parts my gulpfile.js:

var gulp = require('gulp');
var clean = require('gulp-clean');
var tsproject = require('tsproject');

gulp.task('default', [ 'min-js' ]);

gulp.task('clean', function () {
    return gulp
        .src('./dist/', { read: false })
        .pipe(clean());
});

gulp.task('min-js', [ 'clean' ], function () {
    return tsproject
        .src('./tsconfig.json')
        .pipe(gulp.dest('./dist/js'))
});

And my tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "outDir": "./"
    },
    "files": [
        "./src/**/*.tsx",
        "./src/**/*.ts"
    ],
    "bundles": {
        "myApp": {
            "files": [
                "./src/App.tsx"
            ],
            "config": {
                "minify": true,
                "sourcemap": true
            }
        }
    }
}

I had expected this to output a single js-file containing transpiled, bundled and minified JavaScript code but what I get is a bundled (not transpiled nor minified) Typescript file (./dist/js/myApp.min.ts).

Am I doing something wrong or have I completely misunderstood the purpose and intent of tsproject?

解决方案

Well, I'm not sure if this is the best way to go about it but I finally got things working with a gulpfile like this:

var gulp = require('gulp');
var browserify = require('gulp-browserify');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var ts = require('gulp-typescript');
var uglify = require('gulp-uglify');

gulp.task('default', [ 'min-js' ]);

gulp.task('clean', function () {
    return gulp
        .src([
            './tmp/',
            './dist/'
        ], { read: false })
        .pipe(clean());
});

gulp.task('transpile-ts', ['clean'], function () {
    var tsproject = ts.createProject('./src/tsconfig.json');
    return tsproject
        .src()
        .pipe(sourcemaps.init())
        .pipe(tsproject()).js
        .pipe(sourcemaps.write('./sourcemaps'))
        .pipe(gulp.dest('./tmp/js'));
});

gulp.task('min-js', [ 'transpile-ts' ], function () {
    return gulp
        .src('./tmp/js/App.js')
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(browserify())
        .pipe(uglify())
        .pipe(concat('App.min.js'))
        .pipe(sourcemaps.write('./sourcemaps'))
        .pipe(gulp.dest('./dist/js'))
});

Basically I transpile all TypeScript files to Javascript with CommonJS imports to a temporary directory. Then I use Browserify to bundle (i.e. resolve the CommonJS imports) the JavaScript files into a single file. Finally I minify the resulting JavaScript file. Voila!

For some reason I had to first write the transpiled files to a temporary directory and then bundle and minify those files. Instead of just keep on pipeing the result of pipe(tsproject()) to browserify()...

这篇关于如何打包浏览器用户gulp和tsproject的打字稿文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！