I don’t catch the purpose of import and export in es6 section of beta curriculum. These stuff is for back end or how to use it in front end?
Thanks in advance.
[For Node, it’s gradually replacing Node’s native system and they’ve made an awful workaround to get it working in newer versions of Node.]
So in JS, a file is (as of ES6) treated as a module if you import/export to/from it. So you export some functions/objects/etc from one file, then import and use them in another file. That’s basically it, it lets you structure code across files.
It’s not that important when you’re first learning because you’ll only be writing basic stuff in single file. However, it’s fundamentally important that, once you actually build things, there is a sane way to organise your code: that’s what modules give you. It’s the most important thing added to the language in the 2015 (ES6/ES2015) update, I guess by quite a long way.
Modules are critically important for writing software, it’s difficult to write any kind of maintainable application in any language that doesn’t have modules (or something similar to modules). JS has had module systems for years via libraries (RequireJS and CommonJS were the two big ones, former front end, latter back end), but not a native system. And JS now has a very very simple native system; it can’t do anything clever, but it’s very easy to use and it works well.
Use modules all the time, anywhere, with caveats:
- Node doesn’t support it out of the box (it uses its own module system, as ES6 modules did not exist when Node was created), you have to use a specific file extension at the minute.
- Browsers are only beginning to support it as of last year, currently Chrome, Safari and Edge basically support modules, as does Firefox (but it has to be enabled in settings), but there are a lot of gotchas at the minute.
Currently, the normal thing to do is write your JS using modules then use a module bundler to package it up. This is why Webpack exists, and Parcel, Rollup, Browserify etc, that’s their entire job.