0

I'm studying the new import, export feature in Javascript but was wondering, where in code will these statements be syntactically legal?

I understand something like the following won't be legal:

(function(){

    import thing from './thing.js';

})();

but does this mean import is only legal at the top of the module script? Or in the global scope? E.g., what about this:

import a from './a.js';

(function(){

    // ... do something with a ...

})();

import b from './b.js';

// ...

Also, does this limitation apply to export? E.g., will the following be legal?

(function(){

    function internalFunc() {
        // ...
    }

    export { internalFunc };

})();

I couldn't seem to find anything about this in the current drafts of the specification.

Codesmith
  • 5,779
  • 5
  • 38
  • 50

3 Answers3

1

There is no such implementation in javascript. It's planned. But no browser implemented it yet. It's implemented in some transpilers like Webpack and Babel. There is also require in NodeJs. But not natively in javascript. Other way to import files is using RequireJS library.

Reference: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import

Edit

Answering what you asked in comments: AFAIU in the already available implementations of import and export, yes they are available in the global space, and yes import and export are hoisted. But what isn't very clear in your comment's question is what you mean by "only available in global space". There is no such this as a close space that can't acess global space. Global space is accessible everywhere, so are import and export.

Nelson Teixeira
  • 6,297
  • 5
  • 36
  • 73
  • Ok. So then, where in code do the Webpack and Babel transpilers syntactically allow `import` and `export` statements? (I've also updated my question to clarify this feature is yet-to-come) – Codesmith Dec 21 '18 at 22:26
  • Anywhere you want... but they'll all be hoisted (loaded before execution). This question is relevant: https://stackoverflow.com/questions/29329662/are-es6-module-imports-hoisted – Nelson Teixeira Dec 21 '18 at 22:33
  • Got it! So, from the appearance of the syntax of a module from that question (and here: https://tc39.github.io/ecma262/#sec-modules), `import` and `export` are only available in the global scope, and in that context, imports are hoisted. Is this correct? If so, update your answer, and I'll accept it. Thanks for the pointer! – Codesmith Dec 21 '18 at 23:16
0

My reading of the spec is that:

  • module export statements should be at top level of a module

  • module import statements should be at top level of a module

  • function-style module import expressions (which return a promise for the imported items) are allowed anywhere an expression is allowed

As you say, right now it's only supported in transpilers, so I'm not sure how closely existing transpilers (Babel) follow these rules.

Elliot Nelson
  • 11,371
  • 3
  • 30
  • 44
  • Makes sense. And as @NelsonTeixeira adds, `import` statements after other JS statements will be hoisted and loaded before execution. – Codesmith Dec 22 '18 at 15:45
0

1) If you want just to play with import, export statements, then use it without any transpilation (with webpack) in google chrome ;)

I always use ES6 modules while I make some R&D. And then only if my temporarily work worth it, I start to think about transpilation.

Just do not forget to include scripts in such way:

<script type="module" src="index.js"></script>

2) If you need to write some nodejs script, then turn on some experimental flag to use modules - https://nodejs.org/api/esm.html#esm_enabling

OlegDovger
  • 122
  • 6