If we write script using the plain javascript syntax and use babel to compile it, Are babel able to read it and compile it to plain javascript normally, or would that cause an error ?
Babel can transpile ES6.
ES6 is a superset of ES5 (which is what I assume you mean by "plain JavaScript").
Therefore, yes it can (there just isn't much point in converting ES5 to ES5).
Related
I have been using Svelte, TypeScript and Rollup (letting TypeScript handle the transpilation) to target ES7. Now I'm starting a new project and need to target ES5.
The first thing I have noticed is that everything gets transpiled but the components are still classes. I didn't have any scripts in the components at that point. Once I added a script tag to .svelte file, I immediately got the error:
Svelte only supports es6+ syntax. Set your 'compilerOptions.target' to 'es6' or higher
I understand that I will need to set TS target to ES6/ES7 and install Rollup Babel plugin to handle the transpilation to ES5. But why would plain TypeScript transpilation not work? Why does Svelte care about TypeScript target? You'd think that Svelte files get converted to TS before being transpiled to ES5, but it seems like it's the other way around?
The Svelte compiler operates on JS, any other language is pre-processed to turn into JS, otherwise the Svelte compiler would have to deal with many different languages. Also, you cannot just turn JS into TS, TS has more information that JS, there is no way to get that information back.
If your end-result should be ES5 you probably need a multi-step pileline:
TS => JS 6+ =Svelte=> JS 6+ => JS 5
As you all know, now we have 100% support for ES6 in most of the browsers. I am trying to split my bundles into two ES5 and ES6 and get smaller bundle with ES6.
I tried and I was able to see 2 different bundles. But I did not see much of a difference in size. Because, Babel is trying not converting ES5 code into ES6 which is not giving much gain in the bundle size.
Is there any feature in Babel to transpile ES5 code into ES6?
I have written a bunch of Javascript code. I was never aware of the fact that there are multiple JS 'versions', like ES5 and ES6.
I now have this project hosted on Github, and somebody pointed out that because i'm using ES6 code, I might need to convert it to ES5 with Babel.
However, I have no idea which parts of my code use ES6. I could read all of the ES6 specifications, but is there some kind of tool/checker which marks all of the ES6 code in my project?
http://jshint.com/ or http://www.jslint.com/ - will detect ES6 specific specifications by just adding your code in the console
Add it into the Babel repl and see if it changes:
https://babeljs.io/repl/
:-) Hope that helps
Other than that it might be best to setup es6 with babel using webpack, gulp, rollup etc
So that if you write es6 or es5 it will automatically get converted and you can learn some new features on the way while still supporting es5 only browsers
I am writing a Typescript / React / Redux application that takes advantage of modern ES6+ features like generators and object spread.
I am currently setting my tsconfig.json target to ES5 and also including babel-polyfill in my application.
Since ES6 is faster than ES5 in most browsers, I would prefer to target ES6 from my Typescript config. However, I am concerned that I will not be able to support as many browsers.
Does babel-polyfill provide the same level of ES5 support as transpiling to an ES5 target?
Does babel-polyfill provide the same level of ES5 support as transpiling to an ES5 target?
No.
babel-polyfill adds missing ES6 runtime classes and methods. For example, if the browser running your script does not have Promise or Array.prototype.includes, it adds implementations for those into the global scope so that they exist when your code attempts to use them.
It cannot add missing support for ES6 syntax to the browser. If your JavaScript code contains ES6 syntax (e.g. class, ..., or yield), then an ES5 browser will fail to parse your code. No amount of additional JavaScript code at runtime can change how the browser parses your code, so the polyfill doesn't help there.
Bottom-line: if you want to use ES6 syntax and still support ES5 browsers, you must transform your code to ES5 (either by targeting ES5 from TypeScript, or by transforming using Babel).
In short, no, babel-polyfill doesn't provide the same level of ES5 support as transpiling. The documentation states that it includes a custom regenerator runtime as well as core-js.
You can check out core-js to see that it contains the polyfills you need. However, the object-spread syntax cannot be polyfilled, only transpiled.
Can't quite figure out why I'm not getting intellisense for ES6 features in a TypeScript file.
I'm fairly certain it is related to the lib.d.ts file that is used in the typescript source files. For reference this is located in:
C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\typescript\server\typescript\lib
I noticed that the same folder contains lib.es6.d.ts. When going to definition on a method that is defined by the base interface definition files, it points you to lib.d.ts and not the es6 version. The es6 version has all of the interfaces that I need.
That said, even if I include some ES6 methods and force the task runner(which under the hood uses the typescript compiler installed), it doesn't transpile to ES5 like I expected it to.
Maybe my TypeScript compiler version is dated? Primarily I want these features:
Symbol
Array.prototype.includes
String.prototype.includes
I see these interfaces defined in the es6 typing definition file. Is there a way to get VSCode to recognize this? I'm thinking a hacky approach of just including that lib file in my project but I'm trying to avoid that and in the end it still doesn't solve my problem when I transpile to ES5 and get garbage.
Thanks and much love :)