Export and import modules with ES6 error?

  

Could not you use the Revealing Module Pattern instead?

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

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

Advantages

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

Disadvantages

• Overwriting of private variables.

It is well known that RMP has a weak point with respect to the overwriting of private properties since it is needed yes or yes setters since a literal object does not work like a prototype. If you do not use getters, you will need to use this since you would need to put the variables directly in the literal object, 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 against the Revealing pattern with immediately executable functions that return an object (IIFE)?

Actually there are no advantages that deserve to be highlighted, except for:

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

  

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

It does not have any ES6 modules relationship with importing an HTML script. Nothing has changed in this aspect.

Extra

As of today, no browser supports ES6 modules with the exception of Safari Preview, but this is not a problem since with Babel we can traspilar not only ES6 code, but also ES7 / 8 and proposals towards ECMA from even the Stage 2. To transpile you only need to install the package babel-cli globally and the presets you want. For example:

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

And you sweep any module to ES5:

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

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

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 is 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 does translate this to what all explorers know. When I say compiler I mean the babel so you have to "babelize" your code this generally compiles everything into one. For example, I use these dependencies to work on a reagent 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\"",