Home / Questions / 56481
Accepted
Lorthas
Asked: 2020-03-20 16:00:05 +0800 CST 2020-03-20 16:00:05 +0800 CST

Does exporting and importing modules with ES6 give an error?

  • 772

I am trying to learn to export and import modules in ES6 and it tells me in the console: SyntaxError: export declarations may only appear at top level of a module

I'm trying something simple. I have the code like this:

file.js

export default const modulo = function(){
    alert("Hola mundo");
};

Could I then in an html page within a script tag do the following to test? page.html

import modulo  from 'archivo.js';

According to MDN it should work but only the export already gives an error.

Why so much complication? Couldn't you use the revealing pattern instead? What advantages would ES6 modules offer over methods like Revealing with immediately executable functions that return an object (IIFE)? The use of these imports/exports prevents you from having to import the .js with the ?

javascript

2 Answers

  1. Best Answer

    Couldn't you just use the Revealing Module Pattern instead?

    You can do it perfectly, in fact, nothing prohibits you. JavaScript is so flexible that there are many ways to do the same thing. The RMP has the same goal as CommonJS, RequireJS, UMD and ES6 modules; using one or the other is a matter of personal judgment.

    RMP is a fairly well designed and structured pattern, it allows you to write modules with private variables/functions in a practical and simple way. The truth is that it has both advantages and disadvantages.

    Advantage

    • Practical and easy to implement.
    • Provides simple encapsulation.

    Disadvantages

    • Overriding of private variables.

    It is well known that RMP has a weak point regarding the overriding of private properties since setters are needed, since an object literal does not work as a prototype. If you don't use getters, you'll need to use thissince you'd need to put the variables directly into the object literal, and this of course breaks the ideology of this pattern.

    function House (data) {
  let { height, width, large } = data;
  
  return {
    height,
    width,
    large,
    info () {
      console.log('Height:', height);
      console.log('Width:', width);
      console.log('Large:', large);
    }
  };
}

let home = new House({
  height: 3.1,
  width: 7.25,
  large: 18.75
});

// se espera que se pueda sobreescribir
home.height = 3.2;

home.info(); // ups

    What advantages would ES6 modules offer over the Revealing pattern with immediately executable functions that return an object (IIFE)?

    Actually there are no advantages worth highlighting, except for:

    • Standardization: in the future every module will (probably) be written using ES6 modules.
    • Organization: the code is more organized, since it allows you two types of exports (default and independent).
    • Optimization: Common pitfalls and drawbacks of different implementations of the Module pattern , such as references between private and public RMP variables/functions, are avoided.

    The use of these imports/exports prevents you from having to import the .js with the tags in the html?

    ES6 modules has nothing to do with importing an HTML script. Nothing has changed in this regard at all.

    Extra

    To date, no browser supports ES6 modules except for Safari Preview, but this is not a problem since with Babel we can port not only ES6 code, but also ES7/8 and ECMA proposals from even Stage 2. Traspile you just need to install the package babel-cliglobally and the presets you want. For example:

    npm i babel-cli babel-preset-es2015 -g

    And you backpile any module to ES5:

    babel source.js --out-file target.js --presets=es2015

    Which generates you ES5 code compatible with any old and modern browser today.

    • 1

  2. ES6 is not yet 100% supported by browsers, here you can see a compatibility table.

    The idea of ​​this format is to encapsulate the classes and thus separate them into different files. It's made for people like me who come from object-oriented languages ​​(Thank you very much!!! :)). For example, your function would be written like this:

    // hola.jsx
let modulo = () => {
  alert('Hola mundo')
}
export default modulo

    and to import it as we already know

    // main.jsx
import modulo from './hola.jsx'

    Now we can have several classes in our file

    // misclases.jsx
export class MiClase1 {}
export class MiClase2 {}
export class MiClase3 extends MiClase1 {}

    and when we import it we do it this way

    import {MiClase2, MiClase3} from './misclases.jsx'

    The compiler then translates this into what all browsers know. when I say compiler I mean the babel so you have to "babelize" your code, it generally compiles everything into one. For example I use these dependencies to work on a react project and I have some scripts to compile and test it.

        "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "*",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "webpack": "^2.1.0-beta.27",
    "browser-sync": "*"
  }
"scripts": {
    "run": "npm run build && browser-sync start --server --startPath \"www\"",
    "build": "browserify main.jsx -o www/bundle.js -t [ babelify --presets [ es2015 react ] ] ",
    "browser": "browser-sync start --server \"www\"",
    • 0