{"componentChunkName":"component---src-templates-blog-post-js","path":"/JavaScript/javascript-concept-12---commonjs/","webpackCompilationHash":"f92dbf25810602c1889e","result":{"data":{"site":{"siteMetadata":{"title":"Web Devlog","author":"RossenaHuh","siteUrl":"https://github.com/rossenahuh","comment":{"disqusShortName":"RossenaHuh","utterances":"rossenahuh/my-dev-blog.git"},"sponsor":{"buyMeACoffeeId":"rossena"}}},"markdownRemark":{"id":"0cb41b6d-29da-52fc-814a-b657fd90b1e7","excerpt":"Why Module is important?ReusabilityComposabilityLeverageIsolation (Easy to maintain)OrganizationCommonJSCommonJs is one of the standards which NodeJS has been using. Before ES6, browsers didn’t support module system. Basically Syntaxs like CommonJS and AMD made it possible for…","html":"

Why Module is important?

\n\n

CommonJS

\n

CommonJs is one of the standards which NodeJS has been using. Before ES6, browsers didn’t support module system. Basically Syntaxs like CommonJS and AMD made it possible for browsers and server engines to use module system.

\n

This is how the module system works in CommonJS.

\n
// greeting.js\n\nlet hello = function() {\n  console.log('hello')\n}\n\nexports.greeting = hello\n// example.js\n\nlet greeting = require('./greeting.js')\ngreeting.hello() // 'hello'
\n

Babel & Webpack

\n

Though ES Modules now landed in the browsers, there are some old versions of browsers or servers that don’t understand the syntax of ES Modules. To make our codes compatible for those environments, transpiling process (put simply, translating es6 syntax to es5) is necessary.

\n

The well-known ones are babel and bundling tool, webpack.\nA JavaScript bundler gathers the separated codes into one .js file and you can set it up for es5 conversion as well if there are codes written in es6.

\n

Conclusion

\n

Transpilers are still needed for a smooth unification of client-side code and on server-side(NodeJS) code.

\n
\n
\n

Reference

\n

https://flaviocopes.com/es-modules/

\n
\n
","frontmatter":{"title":"JavaScript Concept 12 - Modules in JavaScript (CommonJS, Babel & Webpack)","date":"July 16, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/JavaScript/javascript-concept-12---commonjs/","previous":{"fields":{"slug":"/JavaScript/javascript-concept-11---callback-promise-async&await/"},"frontmatter":{"title":"JavaScript Concept 11 - Callback, Promise and Async/Await","category":"JavaScript"}},"next":{"fields":{"slug":"/development/rest-api/"},"frontmatter":{"title":"The difference between API and REST API","category":"Development"}}}}}