LoginSignup
6
7

More than 5 years have passed since last update.

TypeScriptとBrowserifyは併用できるのか?

Posted at

結論として、source mapが正常に作られないようです。

こんな.tsを作って実験しました。

main.ts
import sub = require('./sub')


console.log('hello world');
sub.hoge();
sub.ts
export function hoge() {
    console.log('good morning')
}

tscでビルドします。

tsc main.ts --module commonjs --sourcemap

実行結果

main.js
var sub = require('./sub');

console.log('hello world');
sub.hoge();
//# sourceMappingURL=main.js.map
sub.js
function hoge() {
    console.log('good morning');
}
exports.hoge = hoge;
//# sourceMappingURL=sub.js.map

更にbrowserifyでくっつけると…

browserify main.js -d -o build.js

実行結果

build.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var sub = require('./sub');

console.log('hello world');
sub.hoge();
//# sourceMappingURL=main.js.map

},{"./sub":2}],2:[function(require,module,exports){
function hoge() {
    console.log('good morning');
}
exports.hoge = hoge;
//# sourceMappingURL=sub.js.map

},{}]},{},[1])
//# sourceMappingURL=data:application/json;---省略---

一つのファイルにsource mapが3つもくっついちゃってます。
当然上手く認識されるはずもなく…。

大人しくrequire.js使っとけって話ですね。

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7