Using Parcel and TypeScript, how are NPM modules interpreted ?

[RPDeshaies]

❔ Question

I was wondering how Parcel was interpreting NPM module dependencies when using Typescript ? Is it simply copying the code inside the bundle.js file it creates ?

🔦 Context

I'm currently using Fusebox and wanted to do a proof of concept to replace it with Parcel.
When doing that, I encountered an issue: my app was not working on Internet Explorer 11 anymore.

After some digging, I found out that I had an arrow function ()=>{} in my bundle.js which are not supported by IE11.

So I checked my dependencies and found out the code was inside a library called encode-uri that was used by a library I was using called query-string to parse query string params.

That library was not IE11 compatible, obviously, so I changed it to use qs instead as a temporary fix.

But that doesn't fix the problem that before, that ()=>{} was converted (probably by Fusebox) to IE11 compatible code

I read in the Fusebox documentation that they

Uses TypeScript compiler for JavaScript transpilation, it's faster than Babel!

How is Parcel transpiling dependencies ? Is it doing any transpilation at all on npm dependencies ? If not, is there a way do to one to make things ES2015 compatible ?

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	^1.9.7
Node	v8.11.2
npm/Yarn	6.3.0
Operating System	MacOS High Sierra 10.13.6

[DeMoorJasper]

Parcel uses babel on js. For node_modules it runs babel-preset-env and uses browserslist in case you'd want to configure it

[RPDeshaies]

And the fact that it's using babel-preset-env + browserslist is default behavior ? Nothing to add / configure (apart from the browserslist config) ?

[DeMoorJasper]

Should work automatically no config

_{Sent with GitHawk}

[RPDeshaies]

I know it might not be related to this question but still taking a guess: any idea why, even though browserslist seems configured properly (it returns IE11), arrow functions are still not converted in the bundle ?

$ npx browserslist
and_chr 67
and_ff 60
and_qq 1.2
and_uc 11.8
android 67
android 4.4.3-4.4.4
android 4.4
baidu 7.12
chrome 68
chrome 67
chrome 66
chrome 63
chrome 49
edge 17
edge 16
firefox 61
firefox 60
firefox 52
ie 11
ie_mob 11
ios_saf 11.3-11.4
ios_saf 11.0-11.2
ios_saf 10.3
op_mini all
op_mob 46
opera 55
opera 54
safari 11.1
safari 11
samsung 7.2
samsung 6.2
samsung 4

My bundle uses query-string and I can find this in my app.js

Object.defineProperty(exports, "__esModule", { value: true });
},{}],"../../../node_modules/strict-uri-encode/index.js":[function(require,module,exports) {
'use strict';

module.exports = str => encodeURIComponent(str).replace(/[!'()*]/g, x => '%' + x.charCodeAt(0).toString(16).toUpperCase());
},{}],"../../../node_modules/decode-uri-component/index.js":[function(require,module,exports) {
'use strict';

and this str => encodeURIComponent crashes on IE11

[RPDeshaies]

I think it's related to the fact that it's a typescript project that causes the problem because if I add a babelrc file to my project, then Parcel tries to load my TSX files using babel (which I don't want it to do, I just want it to use babel for the nodemodules and transpile code properly for old browsers and use Typescript for my own code)

Otherwise is it possible to use the typescript compiler for node_modules ?