I've been working through Webpack tutorial. In one of the sections, it gives the code example that contains one line of essence to this question:
export default class Button { /* class code here */ }
In the next section of said tutorial, titled "Code splitting", the class defined above is loaded on demand, like this:
require.ensure([], () => { const Button = require("./Components/Button"); const button = new Button("google.com"); // ... });
Unfortunately, this code throws an exception:
Uncaught TypeError: Button is not a function
Now, I know that the right way to include ES6 module would be to simply import Button from './Components/Button';
at the top of the file, but using a construct like that anywhere else in the file makes babel a sad panda:
SyntaxError: index.js: 'import' and 'export' may only appear at the top level
After some fiddling with previous (require.ensure()
) example above, I realized that ES6 export default
syntax exports an object that has property named default
, which contains my code (the Button
function).
I did fix the broken code example by appending .default
after require call, like this:
const Button = require("./Components/Button").default;
...but I think it looks a bit clumsy and it is error-prone (I'd have to know which module uses ES6 syntax, and which uses good old module.exports
).
Which brings me to my question: what is the right way to import ES6 code from code that uses CommonJS syntax?
While CommonJS and ES6 modules share similar syntax, they work in fundamentally different ways: ES6 modules are pre-parsed in order to resolve further imports before code is executed. CommonJS modules load dependencies on demand while executing the code.
Export Default is used to export only one value from a file which can be a class, function, or object. The default export can be imported with any name.
One of the major differences between require() and import() is that require() can be called from anywhere inside the program whereas import() cannot be called conditionally, it always runs at the beginning of the file. To use the require() statement, a module must be saved with . js extension as opposed to .
To use export default
with Babel, you can do 1 of the following:
require("myStuff").default
npm install babel-plugin-add-module-exports --save-dev
Or 3:
//myStuff.js var thingToExport = {}; Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = thingToExport;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With