Search code examples
javascriptecmascript-6requirebabeljs

Babel transpiles 'import' to 'require', but 'require isn't useable in ecma5


It was my understanding that use Babel allows you to use ecma6 javascript in an ecma5 environment by transpiling. When I use 'import' however, the 'import' is transpilied to 'require'. 'require' isn't ecma5 and requires the library 'require.js'. Therefore you can't use 'import/ export' without additional dependencies, is this correct?


Solution

  • Yes, Babel is just intended for translating new language features to be compatible with modern javascript engines. Babel doesn't compile to require.js module import syntax. Rather it uses the CommonJS module syntax as used by Node.js. So you could run the code directly without further build dependencies in Node.js.

    As it operates on single files at a time and is a straight forward translation, it doesn't make any decisions as to how you want to include the source code of those other files into the current one.

    That said, if you are going to use it in browser, you will need a build system or bundler that supports CommonJS modules statements:

    • See https://babeljs.io/docs/setup/#installation for a list of many typical build configurations
    • Browserify and Webpack are two of the most popular ones in the Javacript ecosystem
    • These systems 'bundle' your javascript code by injecting files wherever 'require' is referenced and thus typically produce one output js file which you can run in ecma5