setup with grunt
npm install grunt-babel --save-dev, which install grunt-babel task but it’s useless unless you install babel plugins.
npm install babel-preset-es2015 --save-dev, which install preset plugins
npm install babel-plugin-transform-runtime --save-dev, which installs plugin to support babel runtime.
npm install babel-runtime --save, which installs babel-runtime as dependency
Add “.babelrc” file and add below code:
- Add below code into Gruntfile.js
Note we install babel-runtime as dependency, because babel has some common code like library, such as library to support ES6 “class”. If we don’t use babel-runtime and babel-plugin-transform-runtime, everytime you define “class”, babel would generate related code to support class. Obviously it generate a lot duplicate code if you have class in different files. Such as classA.js defines ClassA, classB.js and classC.js extend ClassA. Then each file will have class related support code. To avoid this, we add babel-runtime module, then all class related code in babel-runtime module.
Try to use babel.js
- Add classA.es6.js
- Add classB.es6.js
- Add app.es6.js to use classB
If you run
grunt babel it should generate correct code