如何将TypeScript代码和JS库合并到一个带有源映射的文件中

How to combine TypeScript code and JS libraries into one file with source maps?

本文关键字：一个 文件 映射 代码 TypeScript JS 合并      更新时间：2023-09-26

我可以成功地将我的TypeScript项目编译成一个带有源映射的JS文件，使用如下代码:

tsc --sourcemap --out app.js app.ts

我还可以使用UglifyJS成功地缩小输出，同时保持源映射完整:

uglifyjs app.js --source-map app.js.map --in-source-map app.js.map -o app.js

然而，我想再深入一点。我想把我编译的TypeScript代码(app.js)和几个第三方JS库合并成一个小文件，这个小文件维护指向原始TypeScript(我的代码)或JavaScript(第三方库)的源映射。

我尝试了这样的东西，基本上只是添加一个JS库文件到UglifyJS的输入:

uglifyjs app.js lib/javascript-library.js --source-map app.js.map --in-source-map app.js.map -o app.js

不幸的是，这似乎不起作用。它确实成功地将所有内容合并到一个文件中，TypeScript代码的源映射似乎也被保留了下来。但是当我在lib/javascript-library.js中输入错误时，浏览器中的JS控制台(使用源映射)说错误在我的一个TypeScript文件中，这显然是错误的。

我是一个TypeScript新手，我无法想象我是第一个想要将TS输出与随机JS库结合在一个带有源映射的小型文件中的人，但我找不到任何人谈论它。所以也许我的方法是完全错误的?

Typescript编译器不是那么聪明，要做到这一点，你需要使用更专门的工具。例子:gulpjs。

需求(如果你知道gulpjs，跳过这个):

  1. 安装nodejs
  2. 运行this: npm install -g typescript gulp安装gulp taskrunner
  3. 在项目目录下，运行npm init并按照说明创建package.json
  4. 运行:npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev安装ts编译，concat，丑化和生成源码地图工具
  5. 创建名为gulpfile.js的文件

在gulpfile.js中定义'compile'任务:

var gulp = require('gulp');
var ts = require('gulp-typescript');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
gulp.task('compile', function() {
     var tsResult = gulp.src('app.ts')
        .pipe(sourcemaps.init()) // This means sourcemaps will be generated 
        .pipe(ts({
             sortOutput: true,
                       // ... 
         }));
      return tsResult
         .pipe(concat('lib/js-library.js')) // You can use other plugins that also support gulp-sourcemaps
         .pipe(uglify()) 
         .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file 
         .pipe(gulp.dest('release/'));
});

现在，运行gulp compile，看看它的魔力!

学习此包并构建您的自定义任务compile。

相关文章：