Does it export the whole file, the whole component and everything in his scope or ? ( I am confused since I see we have the same name file as the name of the function (react component) and we use the same casing. So which one is getting targeted? Thanks.
Videos
Can someone please shed more light on this statement from Axel Rauschmayer "Note that default-exporting objects is usually an anti-pattern (if you want to export the properties). You lose some ES6 module benefits (tree-shaking and faster access to imports)."
Link: https://medium.com/@rauschma/note-that-default-exporting-objects-is-usually-an-anti-pattern-if-you-want-to-export-the-cf674423ac38#.nibatprx3
Trying to understand when to use which one? Do you define any listing rules imposing one over the other ?
I'm looking for your thoughts on organizing exports. The problem that I'm having is that I have large const declarations that stretch like 5+ lines, and I want to know if the const is exported or not. Usually with export default function ... I can tell right away. I have toyed around with putting all exports at the top of the file, but nobody else seems to do that... I'm wondering how you would do it.
Lets say I have this example file:
import oscillate from "./oscillate.js";
export function enable() {
document.querySelector("video").play();
}
export function disable() {
document.querySelector("video").pause();
}
/**
* Large doc comment
*/
// 👇 I want this exported as the default export
const toggle = oscillate(
() => {
console.log("From oscillate! Rising");
enable();
},
() => {
console.log("From oscillate! Falling");
disable();
}
);
// We actually use the toggle() function, so we can't leave it unnamed.
document.body.addEventListener("click", () => toggle())Where should the export default statement go? I see three possibilities:
1: Put the export right after the variable declaration. This is pretty good, but the weakness is if the const declaration is long, it fails on both "is this variable exported?" and "what does this file export?"
const toggle = (
// ...
// ...
// ...
);
// Either of these work. It's the same thing.
export { toggle as default };
export default toggle;2: Put all the exports at the top. This makes it extremely easy to skim "what does this file export?", but much harder to answer "is this variable exported".
export { toggle as default, enable, disable };
function enable()...
function disable()...
// Already exported at the top!
const toggle = ...;3: Put the export statement just before the declaration. This keeps the export and const declaration close right until you add a doc comment. In VS Code (and probably others) if you put the export after the doc comment but before the const declaration, it doesn't add it to the hover (it doesn't associate the comment with the const).
export function enable()...
export function disable()...
export { toggle as default };
/**
* Large doc comment
*/
const toggle = ...;
The crux is that I can't export default const x = .... I'm looking for the next best thing. Since there doesn't seem to be a way to keep the const and the export default close together, I'm leaning towards option #2 to put it all at the top. There's just no way to really do it and keep the two close together. The doc comments are right above it, and the expression body itself pushes anything below it out of the vicinity.
Looking for other ideas and/or opinions. Maybe there's some JSDoc tag that I should use like @exported or something?
Here's what I mean:
export const MyFunction () => {}
and:
export default MyFunction
Is there any difference between the two in terms of recommended preference, or performance or anything? I honestly would prefer using the export in front of the function myself, but I'll go with whatever is the best practice.
I use export default when exporting only one component.
If you have multiple components per file to export then use just 'export' and then on the file you want to import them you can do it this way:
import { Head, Logo, Menu } from './Header';
The actual differences between the two have already been stated so I'll just add that I have an es/tslint rule against allowing default exports entirely. Here's a link to the rule for an explanation.
If I do use default exports because it matches the rest of the repo (usually when I'm in React-land instead of Node-land) I feel better about myself by doing:
export const Thingy = props => { ... };
export default Thingy;This starts as a post about "export default", but it's a more general discussion about codebase consistency, cognitive overhead, ability to reason about and refactor a big codebase.
https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/
Regardless what you think about "export default", it's a great blog post that highlights many interesting points.
It's part of the ES6 module system, described here. There is a helpful example in that documentation, also:
If a module defines a default export:
// foo.js export default function() { console.log("hello!") }then you can import that default export by omitting the curly braces:
import foo from "foo"; foo(); // hello!
Update: As of June 2015, the module system is defined in §15.2 and the export syntax in particular is defined in §15.2.3 of the ECMAScript 2015 specification.
export default is used to export a single class, function or primitive from a script file.
The export can also be written as
export default function SafeString(string) {
this.string = string;
}
SafeString.prototype.toString = function() {
return "" + this.string;
};
This is used to import this function in another script file
Say in app.js, you can
import SafeString from './handlebars/safe-string';
A little about export
As the name says, it's used to export functions, objects, classes or expressions from script files or modules
Utiliites.js
export function cube(x) {
return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;
This can be imported and used as
App.js
import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
Or
import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo); // 4.555806215962888
When export default is used, this is much simpler. Script files just exports one thing. cube.js
export default function cube(x) {
return x * x * x;
};
and used as App.js
import Cube from 'cube';
console.log(Cube(3)); // 27
What syntax is usually preferred?
export const a = () => {}
export const b = () => {}
export const c = () => {}or
const a = () => {}
const b = () => {}
const c = () => {}
export default { a, b, c }When creating modules in react like other components, functions e.t.c, what is the better way of exporting your modules?? Trying to settle a debate
Can someone please shed more light on this statement from Axel Rauschmayer "Note that default-exporting objects is usually an anti-pattern (if you want to export the properties). You lose some ES6 module benefits (tree-shaking and faster access to imports)."
Trying to understand when to use which one? Do you define any listing rules imposing one over the other ?
Let's take tree shaking for example. For anyone who doesn't know the term, tree shaking means not including code in the bundle that is never used (e.g. only use parts of lodash that you actually use, instead of bloating the bundle with all of it). Like shaking a tree so everything not firmly attached falls out.
Let's say you made a library that has three separate functions. If you use the default export, then anyone using the library has to import all three of them, even if they just want to use one of the three. A bundler also cannot remove the other two items if they're unused.
Using named exports allows the bundler to safely remove the imports that aren't used.
Similarly it's arguably just an easier/better interface to use named exports. Default exports have no canonical name and using only named exports removes some ambiguity for the end user.
On top of other things, consider updating any code you've written that imports some module. Default exports cannot be as easily found since you can import foo from './bar.js' - you can't easily search for that and find places where some code needs to be updated.
I don't think many of the other points are necessarily valid - it only affects tree-shaking if the default export exports multiple things (such as an object or array). If you export a class or string or whatever else as default, it does not impact tree-shaking.
I'm too lazy and i dont want to set up babel every time i do something in my code editor.
Whats a good reason to chose `export default` vs `module.exports`