A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

M贸dulos de ECMAScript 6

12/17
Recursos

Aportes 37

Preguntas 26

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Hola, mi aporte es el siguiente:
El uso de los m贸dulos en JavaScript depende de las declaraciones Export e Import.

Para modular, solo basta que el archivo tenga la extensi贸n .js, pero el motor V8 que es el que corre en los navegadores, recomienda usar la extensi贸n .mjs

  • Esto es util porque queda claro cu谩l archivo es modulo y cual no.
  • Asegura que los archivos de modulo sean tratados como tal por la extensi贸n Babel o Node.js

驴Como Exportar?
hay dos formas de exportar:

  1. Colocar en frente de cada elemento la palabra export
  2. Exportar en una sola declaraci贸n al final del archivo modulo las caracter铆sticas que se quieren exportar, ejemplo:
export {PlatziClass, Student, LearningPaths};

驴Como Importar?
La importaci贸n obviamente se hace en el script que queremos usar dichos elementos.

import {PlatziClass, Student, LearningPaths} from '/ruta';

驴Como aplicar el modulo en HTML?

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

Otra cosa importante es que podemos Renombrar las Importaciones y Exportaciones.

驴Como renombramos los componentes?
esto b谩sicamente se logra con la palabra clave as
Ejemplo:

export {
PlatziClass as ClasesPlatzi,
LearningPaths as RutaAprendizaje

y en donde vayamos a importar, llamamos con su nuevo nombre, ejemplo:

import { ClasesPlatzi, RutaAprendizaje} from '/ruta';

NOTA:

  • Se recomienda que el cambio de nombre se haga en la importaci贸n y no en la exportaci贸n, pero eso ya es criterio del programador

Comunidad 馃挌

Si tienen un error similar a este: este hilo de stackoverflow entonces la recomendaci贸n es que actualicen tanto npm como nodejs a su versi贸n m谩s actual y ah铆 ya no tendr谩n problemas con ejecutar los m贸dulos. Si tienen dudas de como actualizarlos puedes re checkear los cursos de Prework. 馃挌 Se los dejo a continuaci贸n:

Con la extensi贸n Live Server, el servidor ya esta montado al ejecutar esa extensi贸n para ver la web, y no es necesario instalar Code Runner.
Si usan Live Server, el codigo HTLM debe quedar as铆 cuando se llama a los scripts

    <script src="./main.mjs"  type="module"></script>
    <script src="./module.mjs" type="module"></script>

Why ES6 modules are needed?

  1. Don鈥檛 reinvent the wheel.
  2. Knowledge barrier.
  3. Unexpected behavior.

.
What鈥檚 the purpose?

  • Encapsulate behaviour
  • Easy to work with
  • Easy to maintain
  • Easy to scale
    Yes, it makes development easier!

.

The export keyword is used when we want to make something available somewhere, and the import is used to access what export has made available.

The thumb rule is, in order to import something, you first need to export it.

.
And what can we actually export?

  • A variable
  • An object literal
  • A class
  • A function

Para mas informacion sobre ECMAScript 6 esta este curso https://platzi.com/clases/ecmascript-6/

En pocas palabras, se est谩n creando funciones fuera de un prototipo, pero aun as铆 el prototipo las llama de alguna manera. Al importar ese prototipo, nos es imposible acceder a esas funciones, ya que no hacen parte del prototipo mismo, por lo tanto son clases secretas鈥

Si les sale este error

import { PlatziClass } from "./main.mjs";

Pueden 鈥渟olucionarlo鈥 corri茅ndolo del navegador agregando el src de module a su HTML asi

<script src="module.mjs" type="module"></script>

Vi que en las pregutnas que varios companeros le ocurrio lo mismo, asi que puedo acotar que este fue un excelente ejemplo de

COMPA脩EROS
Se me solucion贸 el problema de CODE RUNNER descargando NODE.JS y el NPM.
para hacerlo vayan a su navegador, escriban nodejs y entren a la primera opci贸n que es 鈥榥odejs. org鈥 Instalen la version que dice LTS 鉂わ笍

Creo que no es necesario utilizar el 鈥.mjs鈥, es igual que el 鈥.jsx鈥 de React

Tambi茅n podemos usar la extensi贸n live server( download link ) de VSCode, nos crea un servidor al correr la extensi贸n en nuestro proyecto.

  1. Importamos el m贸dulo en el html.
<script src="module.mjs" type="module"></script>
  1. Corremos el live server( por unica vez ) y listo.

Code runner es buena extensi贸n , pero para seguir jugando y curioseando 馃, con los objetos instanciados, en el navegador podemos usar live server.

Me encantar铆a alg煤n mini taller en donde se realice una web simple en donde se ponga en pr谩ctica en situaciones reales. Me sent铆 con super poderes con esta clase. 馃槀 Muy bueno realmente. 馃憦馃徏馃憦馃徏馃憦馃徏

Primera vez que veo un archivo .mjs, ya he usado import/export pero no sabia que se llamaba m贸dulos

馃帬 M贸dulos de ECMAScript 6

Apuntes

  • Si bien podemos encapsular atributos y propiedades tambi茅n podemos encapsular archivos enteros
  • Al encapsular archivos enteros podemos restringir y controlar el acceso tanto de variables como funciones o el contenido en s铆 que tenga dicho m贸dulo
  • Para ser utilizados en un sitio web es necesario poder contar con un servidor web y tambi茅n que sea soportado por el navegador del usuario
  • El uso de dichos m贸dulos nos permite usar
    • import {variable} from 鈥./modulo.js鈥
    • export variable

Les dejo esta clase del curso de ECMAScript 6+ donde explican un poco mas acerca de los modulos.

El error del minuto 9:00 tambien se puede solucionar con la extension de Visual Studio que se llama 鈥淟ive Server鈥

Creo que me hab铆a adelantado al futuro jajaja

Si es que les est谩 saliendo un error de tipo que alguna clase o algo no esta referenciado o no esta definido aseg煤rense de:

  • Al momento de ejecutar el c贸digo con el Run Code simplemente den click derecho en la pantalla directamente eso seleccionar谩 todo el c贸digo, mientras que si lo se帽alan pueda que se les escape algo y les saldr谩 error, a mi me paso eso
  • Y aseg煤rense que sus dos archivos est茅n con .mjs y que estos est茅n bien referenciados desde el html y desde el import

Para solucionar el problema de la importaci贸n

  1. En la terminal ejecutamos:

    npm install -g npm (para actualizar npm)
    npm install -g [email protected] (para actualizar node)

  2. Exportamos con:

    export {nombreClase};

  3. Importamos con:

    import {nombreClase} from 鈥榬utaArchivo鈥

resumen de mi aporte : usen let y/o ++const ++

Bueno una obs si quieren un aporte yo me demore un dia en darme cuenta , mis funciones que venian funcionado bien al exportarlas no funcionaban. crei que era por el .mjs , pero viendo videos de youtube vi :

  • Que .mjs no es obigatorio (aun q si muy recomendable).
  • Que aun volviendo a poner mis archivos con .js nuevamente mis funciones no fucionaban exportando e importando en el modulo.
  • finalmente que la fuente de todos mis males era que en mis funciones (osea dentro de ellas ) las variables no las habia declarado ni con var , ni con let , ni con const y eso era toda la fuente de mis males por el bendito Hoisting.
Los CORS est谩n en todos lados 馃ゲ

Para habilitar los m贸dulos en JavaScript es necesario cambiar las extensiones de los archivos .mjs.
Solamente podemos exportar una clase o con la palabra reservada export antes de declarar una clase, de esta manera:

//these functions must be declare outside the class
function videoPlay(id) {
  const secretUrl = "https://platzisecreto.com" + id;
  console.log("Se esta reproduciendo desde la url " + secretUrl);
}

function videoPause(id) {
  const secretUrl = "https://platzisecreto.com" + id;
  console.log("Pausamos la url " + secretUrl);
}

export class PlatziClass {
  constructor({ name, videoID }) {
    this.name = name;
    this.videoID = videoID;
  }

  play() {
    videoPlay(this.videoID);
  }

  pause() {
    videoPause(this.videoID);
  }
}

Ahora, es neceario crear otro archivo .mjs donde se va a realizar la importaci贸n de la clase que previamente fue preparada para ser exportada, esto lo logramos con el uso de la palabra reservada import. La usamos e implementamos el c贸digo de la siguiente manera:

import { PlatziClass } from "./Cursos_Rutas_Estudiantes.mjs";

const clase67 = new PlatziClass({
  name: "JavaScritp: orientado a objetos, basado en prototipos",
  videoID: "qoiu8902j34r902",
});

clase67.play();
clase67.pause();

Les comparte un enlace para que conozcan m谩s sobre los m贸dulos, adem谩s el mismo sitio es una tremenda gu铆a para JavaScript.

Uy me encanto esta clase

A mi no me aparece el error, ya que tengo instalado Live Server de VSCode que trae habilitada la opci贸n de CORS por defecto

Si no se ejecuta el ejercicio de la clase PlatziClass que trabaja con m贸dulos sino que te muestra un error, es debido a que Nodejs no tiene la ultima versi贸n.

Puedes ejecutar lo siguiente para actualizarlo :

sudo npm install -g n

sudo  n stable 

node -v 

Si al hacer node -v sigues con la misma versi贸n , abre otra ventana de la terminal y ejecuta node -v y aparecer谩 actualizada.
Nota.
Al actualizar mi nodejs tambien el npm se me actualizo.

En esta url encuentras informaci贸n detallada, igual con los anteriores pasos pude sacar adelante el ejercicio.

import { PlatziClass } from "./main.mjs";

const clase67 = new PlatziClass({
    name: "curso de JavaScript",
    videoId: "klasjdvhasldkvn",
});

clase67.reproducir();
clase67.pausar();

clase67.reproducir();
clase67.pausar();

clase67.reproducir();
clase67.pausar();

CORS >> Cross-Origin Resource Sharing, se soluciona con un modulo de npm con el mismo nombre, lo usan los navegadores para protegerse de peticiones externas, pero al final no se que tan util sea, explicaci贸n bastante superficial BTW

no funcionan los modulos en mi codigo

Le agregue un poquito mas de codigo a los metodo de pausar y reproducir para simular que no se puede pausar 2 veces por asi decirlo, o analaogamente reproducir multiples veces.

export class PlatziClass{
    constructor({
        name,
        videoID,
    }){
        this.state = true
        this.name = name
        this.videoID = videoID
    }

    reproducir(){
        if(this.state){
            console.log(`Ya se esta reproduciendo weon`)
        }else{
            videoPlay(this.videoID)
        }
        this.state = true
    }

    pausar(){
        if(!this.state){
            console.log(`Ya esta pausado`)
        }else{
            videoStop(this.videoID)
        }
        this.state = false
    }
}
import { PlatziClass } from "./index.mjs"; 

const clase69 = new PlatziClass({
    name: "JavaScript: OOP",
    videoID: "2312asdsa23wnjrwhire"
}) 

clase69.reproducir();

clase69.pausar();

clase69.reproducir()

clase69.reproducir()
clase69.reproducir()

clase69.pausar();
clase69.pausar();
clase69.pausar();

![](

Que interesante, hasta ahora hab铆a trabajado programaci贸n modular, importando exportando funciones desde archivos de js, pero no sab铆a que se deber铆a utilizar la extensi贸n mjs

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Clases del curso POO JS</title>
</head>
<body>
<h1>Esto no est谩 vac铆o, abre la consola</h1>
<script type=鈥渕odule鈥 src="./src/index.js"></script>
</body>
</html>

----- index.js -----

import { Student } from "./class/Student.js"
import { learningPaths } from "./class/LearningPath.js"
import { Course } from "./class/Courses.js"
import { PlatziClass } from 鈥./class/PlatziClases.js鈥

Con runner no termino de entender c贸mo es que queda oculta la url del video. Para ver module asi prefiero no ver nada. Esto hay que verlo cuando podamos crear un servidor e implementar cors, al fin y al cabo no es nada del otro mundo.

En esta clase me perd铆 bastante. Me toca verla varias veces para entender bien.

bueno en mi caso jamas vi antes modulos y no me andaba ni para atraz ni adelnate asi que me toco buscar por Youtube.
Encontre este link que me saco de la oscuridad:

https://www.youtube.com/watch?v=0GEUyQXe3NI&ab_channel=jonmircha

Esta clase no me qued贸 tan clara como las dem谩s 馃槄

Aunque creo que no es necesario lo d cambiar la extensi贸n, siempre se utiliza el index.js donde se colocan todos los imports y el resto de archivos de utils en otras carpetas y no hay cambio de extensi贸n y html los lee sin ning煤n problema, claro en html si hay que colocarle el type=鈥榤odule鈥

Creo que voy a tener que ver la 煤ltima parte entre 15 y 23 veces鈥