how to use ES6 features in ASP.Net - javascript

My one website is into requirement gathering stage. I know that JavaScript new version ES6 is introduced.
On googling, I found some good tools to work with ES6 like:-
Bable
Traceur
Is there any Nuget package available or any alternate that will convert ES6 to ES5 parallely.
or How do I get started with ES6 in ASP.Net MVC site.
I am using VS 2015 & ASP.Net(4.5.2)

You can try Webpack with visual Studio here is a useful package. Just dont forget you require the Babel module.

Related

What governs the ECMAScript version in a create-react-app?

I am currently running a create-react-app, using react v16.2. I would like to use Optional chaining from ECMAScript 2021 (ES12). What governs the ECMAScript version in my app?
For example, in a nodejs backend app I know I need to upgrade my version of node, but I'm unsure how this translates to React.
EDIT - I'm currently on v16.2 and when i try to use optional chaining, I get an error message asking me to use a babel polyfill.
React uses Babel to transpile and polyfill the code i.e. convert your ES2015+ code to ES5 syntax. create-react-app uses Webpack as the build tool and Babel as the transpiler so you should safely be able to use the optional chaining ? syntax and when you run / build your app, it will work as intended.
Babel is what decides this, it's a JS-to-JS transpiler. In create-react-app, you get whatever plugins and presets the maintainers decided on, unless/until you decide to eject so you can manage your own config. If you do decide to do that, you can start with the config they provide and then add new babel presets and plugins on top of that. As of a couple years ago, there's no good way to add to their config without ejecting. For your specific need, it looks like they include that plugin, so if your dependencies are up to date, you should be good to go.

How to check if you have written ES6 code?

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

Using WebStorm for ECMAScript 2015 development without my own gulp/grunt/webpack scripting?

Is it possible to use WebStorm for developing HTML+JS projects WITHOUT writing my own (more and more) complex configuration scripts for babel/gulp/grunt/webpack or similar tools?
I don't need complex frameworks (like Angular or React), but importing multiple ECMAScript 2015 files, debugging and deployment should still be possible.
I found several Settings in WebStorm 2016.1.3, and they seem to integrate some tools, but they do not seem to (automatically) establish a working development system comparable with Visual Studio?
EDIT:
I would like to see my web pages in chrome and debug JS in WebStorm.
current browser and nodejs not full support es2015 feactures, you can use polifil like babel and for using systemjs dependancies (in browser for create bundle) you need use webpack.
You can use pure javascript without any dependancies if feactures is supported, refer to https://kangax.github.io/compat-table/es6/
You don't need gulp/grunt/etc.
WebStorm supports ES2015 just fine, and even some ES2016 features (e.g. async/await). You don't even need to configure a file watcher. Just define the "node" executable to be babel-node.

Using ECMAScript 6 on WebStorm without installing Babel

I enabled ECMAScript 6 on WebStorm so that I do not get IDE errors when using arrow functions.
However, I did not install Babel. I was prompted to install Babel after enabling ECMAScript 6. I had problems installing Babel.
Is it necessary to use Babel together with ECMAScript 6? What would be the side effect of enabling ECMAScript 6 without installing Babel?
I am using node.js on WebStorm.
The purposes of Babel is to convert es6 code into es5 code BECAUSE most browsers do not FULLY support es6 yet, although are getting closer.
https://kangax.github.io/compat-table/es6/
You will see that IE11 support is poor whilst Firefox and Chrome almost have full support.
However, given that the latest Node fully understands ES6 there is now no need for Babel when using Node only unless of course you need to support older versions of Node which only understand ES5.
PS: if you enable Babel support in Webstorm it can generate ES5 files on the fly for you as you code in ES6. Alternatively, you can use a task runner such as Grunt or Gulp to do this for you. Depends if you need it!

ES6 support in VSCode isnt working

Ive seen other questions regarding this issue - Is there a way to turn on ES6/ES7 syntax support in vscode? - but this has now been addressed by Microsoft and implemented in VSCode.
However, I have downloaded the latest version of VSCode, and cloned the example es6 repo from GitHub, and it seems to not be working
To turn ES6/ES7 support, the best way is to use ESLint with dedicated parser ( babel, etc...). I try it if you're interested: VSCode Linter ES6 ES7 Babel linter.
If you're using eslint with npm, you may need the .eslintrc file in the root folder of your project. See my answer to this question and the docs for the ESLint VSCode extension.

Categories