blocks|key|4627957|text|通过使用minifyify的browserify插件，我相信您可以将TypeScript与Browserify结合使用，并保留源地图。编译TypeScript文件后，您应该能够使用minifyify插件通过browserify传递"entry“文件(通过commonjs语法导入另一个)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4627958|var+browserify+=+require('browserify'),
++++bundler+=+new+browserify();

bundler.add('entry.js');
bundler.plugin('minifyify',+{map:+'bundle.js.map'});
bundler.bundle({debug:+true},+function+(err,+src,+map)+{
++if+(err)+console.log(err);
++fs.writeFileSync('bundle.js',+src);
++fs.writeFileSync('bundle.js.map',+map);
});|code-block|syntax|javascript|4627959|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ben-ng/minifyify^0|4|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Using the <a href="https://github.com/ben-ng/minifyify" rel="noreferrer">minifyify</a> browserify plugin I believe you can use TypeScript with Browserify and retain the source maps. After compiling the TypeScript files you should be able to pass the "entry" file (the one that imports the other one via commonjs syntax) through browserify with the minifyify plugin.

<pre><code>var browserify = require('browserify'),
 bundler = new browserify();

bundler.add('entry.js');
bundler.plugin('minifyify', {map: 'bundle.js.map'});
bundler.bundle({debug: true}, function (err, src, map) {
 if (err) console.log(err);
 fs.writeFileSync('bundle.js', src);
 fs.writeFileSync('bundle.js.map', map);
});
</code></pre>

blocks|key|122091|text|tsify是一个browserify插件，它更好，可以取代typescriptifier。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|122092|npm+install+tsify+browserify+watchify|style|CODE|122093|您可以像这样使用tsify：|122094|browserify+src/index.ts+-p+tsify+--debug+-o+build/index.js|122095|请注意，这支持browserify+--debug开关，不需要额外的技巧。因此您也可以将其与watchify一起使用，如下所示：|122096|watchify+src/index.ts+-p+tsify+--debug+-o+build/index.js|122097|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.org/package/tsify^0|0|5|0|0|0|11|0|0|0|1M|0|I|7|0|0|1K|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@$A|12|B|13|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|15|8|@$A|16|B|17|F|G]]|9|@]|C|$]]|$1|L|3|M|5|6|7|18|8|@$A|19|B|1A|F|G]]|9|@]|C|$]]|$1|N|3|O|5|6|7|1B|8|@$A|1C|B|1D|F|G]]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<a href="https://www.npmjs.org/package/tsify">tsify</a> is a browserify plugin that is better and replaces e.g. typescriptifier.

<code>npm install tsify browserify watchify</code>

You use tsify like this:

<code>browserify src/index.ts -p tsify --debug -o build/index.js</code>

Notice that this supports browserify <code>--debug</code> switch, no extra tricks required. So you can also use it with watchify like this:

<code>watchify src/index.ts -p tsify --debug -o build/index.js</code>

blocks|key|4628047|text|以下是我的工作解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4628048|var+settings+=+{
++projectName+:+"test"
};++++

gulp.task("bundle",+function()+{

++var+mainTsFilePath+=+"src/main.ts";
++var+outputFolder+++=+"bundle/src/";
++var+outputFileName+=+settings.projectName+%2B+".min.js";
++var+pkg++++++++++++=+require("./package.json");

++var+banner+=+[
++++"/**",
++++"+*+<%25=+pkg.name+%25>+v.<%25=+pkg.version+%25>+-+<%25=+pkg.description+%25>",
++++"+*+Copyright+(c)+2015+<%25=+pkg.author+%25>",
++++"+*+<%25=+pkg.license+%25>",
++++"+*/",+""
++].join("\n");

++var+bundler+=+browserify({
++++debug:+true,
++++standalone+:+settings.projectName
++});

++//+TS+compiler+options+are+in+tsconfig.json+file
++return+bundler.add(mainTsFilePath)
++++++++++++++++.plugin(tsify)
++++++++++++++++.bundle()
++++++++++++++++.pipe(source(outputFileName))
++++++++++++++++.pipe(buffer())
++++++++++++++++.pipe(sourcemaps.init({+loadMaps:+true+}))
++++++++++++++++.pipe(uglify())
++++++++++++++++.pipe(header(banner,+{+pkg+:+pkg+}+))
++++++++++++++++.pipe(sourcemaps.write('./'))
++++++++++++++++.pipe(gulp.dest(outputFolder));
});|code-block|syntax|javascript|4628049|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is my working solution:

<pre><code>var settings = {
 projectName : "test"
}; 

gulp.task("bundle", function() {

 var mainTsFilePath = "src/main.ts";
 var outputFolder = "bundle/src/";
 var outputFileName = settings.projectName + ".min.js";
 var pkg = require("./package.json");

 var banner = [
 "/**",
 " * &lt;%= pkg.name %&gt; v.&lt;%= pkg.version %&gt; - &lt;%= pkg.description %&gt;",
 " * Copyright (c) 2015 &lt;%= pkg.author %&gt;",
 " * &lt;%= pkg.license %&gt;",
 " */", ""
 ].join("\n");

 var bundler = browserify({
 debug: true,
 standalone : settings.projectName
 });

 // TS compiler options are in tsconfig.json file
 return bundler.add(mainTsFilePath)
 .plugin(tsify)
 .bundle()
 .pipe(source(outputFileName))
 .pipe(buffer())
 .pipe(sourcemaps.init({ loadMaps: true }))
 .pipe(uglify())
 .pipe(header(banner, { pkg : pkg } ))
 .pipe(sourcemaps.write('./'))
 .pipe(gulp.dest(outputFolder));
});
</code></pre>

blocks|key|4628069|text|当我尝试在Visual+Studio代码中调试我在Chrome中运行的Angular2应用程序时(使用Chrome扩展的调试器)，我遇到了类似的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4628070|我使用gulp作为我的任务运行器，我的设置如下:+Typescript文件->+tsc+->中间es5+js+->+browserify+(加上产品版本中的uglify+)+->编译包|4628071|我的目录结构如下：|4628072|%7C-+src
++++%7C-+my+.ts+files+here
++++%7C-+main.ts+-+my+entry+file
%7C-+dist
++++%7C-+intermediate+files+go+here
%7C-+web
++++%7C-+app.js+-+final+bundle
++++%7C-+app.js.map+-+final+bundle+map
%7C-+gulpfile.js|code-block|syntax|javascript|4628073|gulpfile.js|offset|length|style|CODE|4628074|var+gulp+=+require('gulp'),
++++tsc+=+require('gulp-typescript'),
++++browserify+=+require('browserify'),
++++uglify+=+require('gulp-uglify'),
++++sourcemaps+=+require('gulp-sourcemaps'),
++++source+=+require('vinyl-source-stream'),
++++buffer+=+require('vinyl-buffer');

gulp.task('tsc',+[],+()+=>+{
++++++++++++return+gulp.src(['src/**/*.ts'])
++++++++++++++++++++.pipe(sourcemaps.init())
++++++++++++++++++++.pipe(tsc({
++++++++++++++++++++++++++++"target":+"es5",
++++++++++++++++++++++++++++"module":+"commonjs",
++++++++++++++++++++++++++++"moduleResolution":+"node",
++++++++++++++++++++++++++++"sourceMap":+true,
++++++++++++++++++++++++++++"emitDecoratorMetadata":+true,
++++++++++++++++++++++++++++"experimentalDecorators":+true,
++++++++++++++++++++++++++++"lib":+[+"es2015",+"dom"+],
++++++++++++++++++++++++++++"noImplicitAny":+true,
++++++++++++++++++++++++++++"suppressImplicitAnyIndexErrors":+true
++++++++++++++++++++}))
++++++++++++++++++++.pipe(sourcemaps.write(null,+{
++++++++++++++++++++++++++++"sourceRoot":+function(file)+{+
++++++++++++++++++++++++++++++++++++let+parts+=+file.relative.split('\\');
++++++++++++++++++++++++++++++++++++let+root+=+Array(parts.length+%2B+1).join('../')+%2B+'src';
++++++++++++++++++++++++++++++++++++return+root;
++++++++++++++++++++++++++++}
++++++++++++++++++++}))
++++++++++++++++++++.pipe(gulp.dest('dist/'));
++++});+
gulp.task('bundle',+['tsc'],+()+=>+{
++++let+b+=+browserify({
++++++++entries:+'dist/main.js',
++++++++debug:+true,
++++});

++++return+b.bundle()
++++++++.pipe(source('app.js'))
++++++++.pipe(buffer())
++++++++.pipe(sourcemaps.init({loadMaps:+true}))
++++++++.pipe(sourcemaps.write('./',+{
++++++++++++"sourceRoot":+"../",
++++++++}))
++++++++.pipe(gulp.dest('web/'));
})

gulp.task('default',+['bundle']);|4628075|解释/推理：|4628076|由于某种原因，browserify不能读取和解析链接在.js文件中的.js.map文件(通过结尾的特殊注释)，但是当源映射嵌入到js文件中时，它可以读取和解析这些文件。因此，通过向sourcemaps传递null而不是path，它会将其嵌入到生成的.js文件的末尾。|4628077|我注意到的下一个问题是sourcemaps不会自动遵循目录结构(当它转到下一个目录级别时，将'../‘添加到sourceRoot中)，所以我做了一个快速函数来补充这个问题。请记住，它只适用于Windows+-在Linux上，您必须更改拆分字符。|4628078|function(file)+{+
++++let+parts+=+file.relative.split('\\');+//+put+'/'+here+on+Linux
++++let+root+=+Array(parts.length+%2B+1).join('../')+%2B+'src';
++++return+root;
}|4628079|当然，有一种方法可以检测正确的路径分隔符，我只在Windows上调试，因此这对我的目的并不重要。|4628080|我希望它能帮助一些人，因为我花了整个星期天上午来追踪这个问题。|4628081|entityMap^0|0|0|0|0|0|B|0|0|0|7|A|2I|A|2U|4|0|B|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1A|8|@$M|1B|N|1C|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1D|8|@]|9|@]|A|$I|J]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1F|8|@$M|1G|N|1H|O|P]|$M|1I|N|1J|O|P]|$M|1K|N|1L|O|P]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@$M|1N|N|1O|O|P]]|9|@]|A|$]]|$1|Y|3|Z|5|H|7|1P|8|@]|9|@]|A|$I|J]]|$1|10|3|11|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|15|$]]

I faced similar issue when trying to debug my Angular2 app running in Chrome in Visual Studio Code (Using Debugger for Chrome extension)

I use gulp as my task runner and my setup is as follows:
Typescript files -> tsc -> intermediate es5 js -> browserify (plus uglify in production build) -> compiled bundle

My directory structure is as follows:

<pre><code>|- src
 |- my .ts files here
 |- main.ts - my entry file
|- dist
 |- intermediate files go here
|- web
 |- app.js - final bundle
 |- app.js.map - final bundle map
|- gulpfile.js
</code></pre>

<code>gulpfile.js</code>:

<pre><code>var gulp = require('gulp'),
 tsc = require('gulp-typescript'),
 browserify = require('browserify'),
 uglify = require('gulp-uglify'),
 sourcemaps = require('gulp-sourcemaps'),
 source = require('vinyl-source-stream'),
 buffer = require('vinyl-buffer');

gulp.task('tsc', [], () =&gt; {
 return gulp.src(['src/**/*.ts'])
 .pipe(sourcemaps.init())
 .pipe(tsc({
 "target": "es5",
 "module": "commonjs",
 "moduleResolution": "node",
 "sourceMap": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "lib": [ "es2015", "dom" ],
 "noImplicitAny": true,
 "suppressImplicitAnyIndexErrors": true
 }))
 .pipe(sourcemaps.write(null, {
 "sourceRoot": function(file) { 
 let parts = file.relative.split('\\');
 let root = Array(parts.length + 1).join('../') + 'src';
 return root;
 }
 }))
 .pipe(gulp.dest('dist/'));
 }); 
gulp.task('bundle', ['tsc'], () =&gt; {
 let b = browserify({
 entries: 'dist/main.js',
 debug: true,
 });

 return b.bundle()
 .pipe(source('app.js'))
 .pipe(buffer())
 .pipe(sourcemaps.init({loadMaps: true}))
 .pipe(sourcemaps.write('./', {
 "sourceRoot": "../",
 }))
 .pipe(gulp.dest('web/'));
})

gulp.task('default', ['bundle']);
</code></pre>

<h2>Explanation/reasoning:</h2>

For some reason <code>browserify</code> doesn't read and parse .js.map files linked in .js file (via special comment at the end) but it does when the source map is embedded in js file. So, by passing <code>null</code> instead of path to <code>sourcemaps</code> it will embed it at the end of generated .js file.

Next issue I noticed was that <code>sourcemaps</code> doesn't automatically follow directory structure (add '../' to sourceRoot when it goes to next directory level), so I made a quick function to complement this. Keep in mind that it only works on Windows - on Linux you'd have to change split character.

<pre><code>function(file) { 
 let parts = file.relative.split('\\'); // put '/' here on Linux
 let root = Array(parts.length + 1).join('../') + 'src';
 return root;
}
</code></pre>

Certainly there is a way to detect correct path separator, I'm debugging only on Windows thus it's not important for my purposes.

I hope it helps someone, cause I've spent whole Sunday morning tracking down this problem.

Background: I am compiling 2 dependent TypeScript files to js, which produces also source maps (one source map per file) using tsc 1.0

I'm using <code>-m commonjs</code> and then use browserify to generate a single <code>bundle.js</code>

However I noticed that I get the original source map references twice in the bundle, which doesn't seem to work.

Passing <code>--debug</code> doesn't seem to do the trick either. 

I had a feeling this issue: <a href="https://github.com/substack/node-browserify/issues/325">https://github.com/substack/node-browserify/issues/325</a> is somewhat related, but I couldn't figure out how the issue was resolved.

Also <a href="https://github.com/substack/browser-pack">https://github.com/substack/browser-pack</a> was suggested, but again I don't fully understand how to use it, is it a replacement to browserify? 

Bottom line, I would like to merge the 2 js files but "merge" the js to ts source maps using browserify. Is that possible?

Keep original typescript source maps after using browserify

Visual Studio

TypeScript

调试器

Windows

Linux

背景:我正在将两个相关的TypeScript文件编译成js，这也会使用TSC1.0生成源图(每个文件一个源图)我先使用-m commonjs，然后使用browserify生成单个bundle.js然而，我注意到我在捆绑包中获得了两次原始源映射引用，这似乎不起作用。传递--debug似乎也没有起到作用。我有一种感觉这个问...

问使用browserify后保留原始typescript源代码映射
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用browserify后保留原始typescript源代码映射EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用browserify后保留原始typescript源代码映射
EN