{"id":1729,"date":"2016-02-15T11:05:44","date_gmt":"2016-02-15T05:35:44","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1729"},"modified":"2018-10-19T10:13:38","modified_gmt":"2018-10-19T04:43:38","slug":"setting-up-es6-babel-gulp","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/setting-up-es6-babel-gulp\/","title":{"rendered":"Setting up ES6+Babel+Gulp"},"content":{"rendered":"

ECMAScript 6 (ES6, specification at http:\/\/www.ecma-international.org\/ecma-262\/6.0\/<\/a>) has many nice features, but presently not all browsers support ES6. However you can still develop your applications in ES6 and make it run in all browsers. For this you need what is called as transpiler – which converts ES6 code to ES5, which all browsers understand currently.<\/p>\n

One of the popular transpiler is Babel<\/a>\u00a0. In this post we will see how to use Node.js (https:\/\/nodejs.org\/), Gulp.js (https:\/\/gulp<\/span>js.com\/), Browserify (http:\/\/browserify.org\/) \u00a0to compile ES6 code to ES5.<\/p>\n

Gulp is a build tool for Node.js applications. Browserify resovles ‘require’ modules of Node.js and bundles all modules in one file. We will first use browserify\u00a0to combine all our JS code in one file and then feed the output to babelify to translate the code to ES5. Structure of this sample project is as follows –<\/p>\n

ES6BabelTest\r\n  -- build\r\n  -- src\r\n    -- js\r\n    -- html\r\n  -- gulpfile.js\r\n<\/pre>\n
Not all the files are folders are shown above, for example package.json and node_modules folder are not shown.<\/p>\n
Let’s first write some simple ES6 code. We will create a Person class (person.js) , instantiate that in index.js and we will include index.js in index.html which we will create in src\/html folder.<\/p>\n
person.js :<\/strong><\/span><\/p>\n
export<\/span> default<\/span> class<\/span> Person {<\/span>\r\n    constructor<\/span> (<\/span>firstName,<\/span> lastName)<\/span> {<\/span>\r\n        this<\/span>.<\/span>firstName =<\/span> firstName;<\/span>\r\n        this<\/span>.<\/span>lastName =<\/span> lastName;<\/span>\r\n    }<\/span>\r\n\r\n    getFirstName(<\/span>)<\/span> {<\/span>\r\n        return<\/span> this<\/span>.<\/span>firstName;<\/span>\r\n    }<\/span>\r\n\r\n    getLastName(<\/span>)<\/span> {<\/span>\r\n        return<\/span> this<\/span>.<\/span>lastName;<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n<\/pre>\n
index.js:<\/strong><\/span><\/p>\n
import<\/span> Person from \"<\/span>.\/person<\/span>\"<\/span>;<\/span>\r\n\r\nlet<\/span> person =<\/span> new<\/span> Person(<\/span>\"<\/span>Ram<\/span>\"<\/span>,<\/span> \"<\/span>Kulkarni<\/span>\"<\/span>)<\/span>;<\/span>\r\n\r\ndocument.<\/span>getElementById(<\/span>\"<\/span>nameSpan<\/span>\"<\/span>)<\/span>.<\/span>innerHTML =<\/span> person.<\/span>getFirstName(<\/span>)<\/span> +<\/span> \"<\/span> \"<\/span> +<\/span> person.<\/span>getLastName(<\/span>)<\/span>;<\/span>\r\n<\/pre>\n
And index.html<\/strong><\/span> is :<\/p>\n
<!DOCTYLE html><\/span>\r\n\r\n<<\/span>html<\/span>><\/span>\r\n    <<\/span>head<\/span>><\/span>\r\n        <<\/span>title<\/span>><\/span>Babel Test<\/<\/span>title<\/span>><\/span>\r\n    <\/<\/span>head<\/span>><\/span>\r\n    <<\/span>body<\/span>><\/span>\r\n        <<\/span>h2<\/span>><\/span>Testing ES6 + Babel<\/<\/span>h2<\/span>><\/span>\r\n        <<\/span>b<\/span>><\/span>Name :<\/<\/span>b<\/span>><\/span> <<\/span>span<\/span> id<\/span>=<\/span>\"nameSpan\"<\/span>><\/span><\/<\/span>span<\/span>><\/span>\r\n        <<\/span>script<\/span> src<\/span>=<\/span>\"bundle.js\"<\/span>><\/span><\/<\/span>script<\/span>><\/span>\r\n    <\/<\/span>body<\/span>><\/span>\r\n<\/<\/span>html<\/span>><\/span>\r\n<\/pre>\n
Note that in the above code bundle.js would be generated as an output of a Gulp task.<\/p>\n
Before we take a look at guplfile.js, make sure required npm modules are installed. You should have installed gulp globally and also add it in dev dependencies (so that it is added to packages.json). Run following command to do this (it is assumed here that you have installed node.js) –<\/p>\n
npm<\/span> install<\/span> -g<\/span> --save-dev<\/span> gulp<\/span>\r\n<\/pre>\n
Then install following modules –<\/p>\n
npm<\/span> install<\/span> --save-dev<\/span> babel-core babel-loader babelify<\/span> browserify<\/span> gulp-connect<\/span> vinyl-source-stream<\/span>\r\n<\/pre>\n
Let’s now look at guplfile.js<\/strong><\/span><\/p>\n
\/\/Include required modules<\/span>\r\nvar<\/span> gulp =<\/span> require(<\/span>\"<\/span>gulp<\/span>\"<\/span>)<\/span>,<\/span>\r\n    babelify =<\/span> require(<\/span>'<\/span>babelify<\/span>'<\/span>)<\/span>,<\/span>\r\n    browserify =<\/span> require(<\/span>\"<\/span>browserify<\/span>\"<\/span>)<\/span>,<\/span>\r\n    connect =<\/span> require(<\/span>\"<\/span>gulp-connect<\/span>\"<\/span>)<\/span>,<\/span>\r\n    source<\/span> =<\/span> require(<\/span>\"<\/span>vinyl-source-stream<\/span>\"<\/span>)<\/span>\r\n;<\/span>\r\n\r\n\/\/Default task. This will be run when no task is passed in arguments to gulp<\/span>\r\ngulp.<\/span>task(<\/span>\"<\/span>default<\/span>\"<\/span>,<\/span>[<\/span>\"<\/span>copyStaticFiles<\/span>\"<\/span>,<\/span> \"<\/span>build<\/span>\", \"<\/span>startServer\"<\/span>]<\/span>)<\/span>;<\/span>\r\n\r\n\/\/Copy static files from html folder to build folder<\/span>\r\ngulp.<\/span>task(<\/span>\"<\/span>copyStaticFiles<\/span>\"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\r\n    return<\/span> gulp.<\/span>src(<\/span>\"<\/span>.\/src\/html\/*.*<\/span>\"<\/span>)<\/span>\r\n    .<\/span>pipe(<\/span>gulp.<\/span>dest(<\/span>\"<\/span>.\/build<\/span>\"<\/span>)<\/span>)<\/span>;<\/span>\r\n}<\/span>)<\/span>;<\/span>\r\n\r\n\/\/Convert ES6 ode in all js files in src\/js folder and copy to <\/span>\r\n\/\/build folder as bundle.js<\/span>\r\ngulp.<\/span>task(<\/span>\"<\/span>build<\/span>\"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\r\n    return<\/span> browserify(<\/span>{<\/span>\r\n        entries:<\/span> [<\/span>\"<\/span>.\/src\/js\/index.js<\/span>\"<\/span>]<\/span>\r\n    }<\/span>)<\/span>\r\n    .<\/span>transform(<\/span>babelify)<\/span>\r\n    .<\/span>bundle(<\/span>)<\/span>\r\n    .<\/span>pipe(<\/span>source<\/span>(<\/span>\"<\/span>bundle.js<\/span>\"<\/span>)<\/span>)<\/span>\r\n    .<\/span>pipe(<\/span>gulp.<\/span>dest(<\/span>\"<\/span>.\/build<\/span>\"<\/span>)<\/span>)<\/span>\r\n    ;<\/span>\r\n}<\/span>)<\/span>;<\/span>\r\n\r\n\/\/Start a test server with doc root at build folder and <\/span>\r\n\/\/listening to 9001 port. Home page = http:\/\/localhost:9001<\/span>\r\ngulp.<\/span>task(<\/span>\"<\/span>startServer<\/span>\"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\r\n    connect.<\/span>server(<\/span>{<\/span>\r\n        root :<\/span> \"<\/span>.\/build<\/span>\"<\/span>,<\/span>\r\n        livereload :<\/span> true<\/span>,<\/span>\r\n        port :<\/span> 9001<\/span>\r\n    }<\/span>)<\/span>;<\/span>\r\n}<\/span>)<\/span>;<\/span>\r\n<\/pre>\n
Now run gulp command in the project folder, to execute the default task. However that results in the following error –<\/p>\n
\n
events.js:72\r\n        throw er; \/\/ Unhandled 'error' event\r\n              ^\r\nSyntaxError: 'import' and 'export' may appear only with 'sourceType: module'\r\n<\/pre>\n<\/div>\n
It turns out that earlier Babel was shipping with all the required plugin, including one that translates ES6 to ES5. But since Babel 6.0, you have to explicitly include plugins or presets (which include certain predefined plugins). So we will install Babel\u00a0preset es2015<\/a>\u00a0. Execute following command –<\/p>\n
npm install babel-preset-es2015 --save-dev\r\n<\/pre>\n
But this is not enough. We need to add this present in the Babel configuration. We could do that by passing configuration parameter to babelify –<\/p>\n
gulp.<\/span>task(<\/span>\"<\/span>build<\/span>\"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\r\n    return<\/span> browserify(<\/span>{<\/span>\r\n        entries:<\/span> [<\/span>\"<\/span>.\/src\/js\/index.js<\/span>\"<\/span>]<\/span>\r\n    }<\/span>)<\/span>\r\n    .<\/span>transform(<\/span>babelify.<\/span>configure(<\/span>{<\/span>\r\n        presets :<\/span> [<\/span>\"<\/span>es2015<\/span>\"<\/span>]<\/span>\r\n    }<\/span>)<\/span>)<\/span>\r\n    .<\/span>bundle(<\/span>)<\/span>\r\n    .<\/span>pipe(<\/span>source<\/span>(<\/span>\"<\/span>bundle.js<\/span>\"<\/span>)<\/span>)<\/span>\r\n    .<\/span>pipe(<\/span>gulp.<\/span>dest(<\/span>\"<\/span>.\/build<\/span>\"<\/span>)<\/span>)<\/span>\r\n    ;<\/span>\r\n}<\/span>)<\/span>;<\/span>\r\n<\/pre>\n
After this change, gulp executes without any error\u00a0and ES6 is translated by Babel to ES5. Browse to http:\/\/localhost:9001 and verify that the application works.<\/p>\n
-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
ECMAScript 6 (ES6, specification at http:\/\/www.ecma-international.org\/ecma-262\/6.0\/) has many nice features, but presently not all browsers support ES6. However you can still develop your applications in ES6 and make it run in all browsers. For this you need what is called as transpiler – which converts ES6 code to ES5, which all browsers understand currently. One … <\/p>\n
Continue reading “Setting up ES6+Babel+Gulp”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"ES6+Babel+Gulp - How to set it up","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[20,1],"tags":[123,124,125,5,126],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-rT","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1729"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=1729"}],"version-history":[{"count":3,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1729\/revisions"}],"predecessor-version":[{"id":2016,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1729\/revisions\/2016"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1729"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}