A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Publicar en npm

41/42
Recursos

Aportes 77

Preguntas 17

Ordenar por:

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

Publicar en NPM

Paso 1: npm actualizado

Tener npm instalado y actualizado en tu sistema. Si no est谩 actualizado ejecuta:

npm install [email protected] -g

Fuente: https://docs.npmjs.com/getting-started/installing-node

Paso 2: github

Tener tu proyecto en Github. No obligatorio pero recomendable. Recuerda que solo puedes publicar gratis paquetes p煤blicos. Para paquetes privados deber谩s sacar la tarjeta de cr茅dito.

Paso 3: package.json

Tu proyecto debe tener un archivo package.json en el directorio ra铆z. Si no lo tuviera, ejecuta npm init desde la consola y sigue los pasos.

Paso 4: tu cuenta en npmjs.com

Ve a npmjs.com y crea una cuenta. Una vez creada tu cuenta no encontrar谩s ning煤n bot贸n de subir proyecto, as铆 que no pierdas tiempo busc谩ndolo (como yo).

Paso 5: publicar el proyecto

Ahora que tienes tu cuenta, ve a tu proyecto en local con la terminal y ejecuta:

npm login
// ingresa tus datos de usuario y contrase帽a de npmjs.com

Una vez que has iniciado sesi贸n es tan simple como ejecutar:

npm publish

El error.

$ npm run build

> @garciafran/testmediaplayer@1.0.0 build C:\Users\fgarcia\Platzi\CursoProfesionaldeJavaScript\mediaplayer
> tsc src/**/*.ts src/plugins/*.ts src/plugins/**/*.ts --outDir lib

error TS6053: File 'src/**/*.ts' not found.

error TS6053: File 'src/plugins/**/*.ts' not found.

error TS6053: File 'src/plugins/*.ts' not found.


Found 3 errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @garciafran/testmediaplayer@1.0.0 build: `tsc src/**/*.ts src/plugins/*.ts src/plugins/**/*.ts --outDir lib`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @garciafran/testmediaplayer@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Lo solucione asi:

Se agrego un archivo tsconfig.json

{
    "compilerOptions": {
        "module": "ES6",
        "preserveConstEnums": true,
        "outDir": "lib"
    },
    "include": ["./src/**/*"],
    "exclude": ["./node_modules", "/*.spec.ts"]
}

Y el script en package.json, quedo asi:

  "scripts": {
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Excelente curso!

Hay alg煤n grupo de Whatsapp, Telegram o Slack con gente interesada en Javascript o desarrollo web en general?

Me sale este error, quisiera saber como arreglarlo鈥 :'v

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/@alejo%2fmediaplayer - Forbidden
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/alejo1/.npm/_logs/2020-02-18T13_52_10_723Z-debug.log```

error TS6053: File 鈥榮rc/**/*.ts鈥 not found.

Por ahora lo solucion茅 colocanco la ruta de cada archivo, pero si alguien sabe porque sale ese mensaje, le agradecer铆a la ayuda.

ruta: 鈥渢sc src/MediaPlayer.ts src/plugins/AutoPause.ts src/plugins/AutoPlay.ts src/plugins/Ads/Ads.ts src/plugins/Ads/index.ts --outDir lib鈥

A mi no me arranco de una fue necesario borrar el cache.

rm -rf .cache dist

y del navegador con Ctrl+Shift+R

Y luego de ello arranco bien.

Registrarse en npm:

npm login

Ver si lo est谩s:

npm whoami

Si es la primera vez que te registras necesitar谩s entrar en tu correo y verificar la cuenta

La primera aportaci贸n al open source 馃槑

me podrian ayudar con ese error? no entiendo porque dice que no lo encuentra estoy usando CMD

No se si alguien m谩s ten铆a la duda, pero no sab铆a que funci贸n ten铆a la bandera -D en el comando install, as铆 lo quise compartir.

Investigando me di cuenta que me permite agregar autom谩ticamente el paquete instalado en la lista de dependencias de mi package.json

Espero haya sacado a alguno de la duda 馃槃

Recomiendo mucho el curso de gesti贸n de dependencias con npm porque se profundiza mucho m谩s en esto ^^

TIPS PARA PUBLICAR TU PROYECTO
TIP 1 : No usar may煤suculas en el nombre del repo a subir
TIP 2 : Hay que verificar tu email cuando te creas la cuenta
Suena algo simple pero me pas贸 jeje

algo dif铆cil algunos pasos pero vamos practicando.

Comparto el archivo tsconfig.json que me ha funcionado:

{
鈥渃ompilerOptions鈥: {
鈥module鈥: 鈥ES6鈥,
鈥減reserveConstEnums鈥: true,
鈥渙utDir鈥: 鈥lib
},
鈥include鈥: ["./src//*"],
鈥渆xclude鈥: ["./node_modules", "/*.spec.ts"]
}

Y la tarea del archivo package.json que utilic茅 es:

build鈥: 鈥渢sc鈥,

No me salio el video xd

Emocionante publicar tu primer repositorio 鉂わ笍

uff esta clase es de gran valor! Excelente!

a mi me funciono de la siguiente manera, notese el target

{
  "compilerOptions": {
      "module": "ES6",
      "target": "ES5",
      "preserveConstEnums": true,
      "outDir": "lib"
  },
  "include": ["./src/**/*"],
  "exclude": ["./node_modules", "/*.spec.ts"]
}
{
  "name": "@garceseder2/mediaplayer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^4.1.3"
  }
}

para el error, es configurar con el comando

tsc --init

esto crea un archivo .tsconfig, donde le pasaremos las configuraciones outDir
Este es el archivo con el contenido que nos interesa el comando nos genera m谩s propiedades pero comentadas

{  
	"compilerOptions": {
	    "target": "es5",
	    "module": "commonjs",
	    "outDir": "lib",
	    "strict": true,
	    "esModuleInterop": true,
	    "skipLibCheck": true,
	    "forceConsistentCasingInFileNames": true 
	  },
	"include": ["./src/**/*"],
 	"exclude": ["./node_modules", "/*.spce.ts"]
}

y ya con esto solamente es que en el comando del build del package.json pongamos tsc

{
"scripts": {
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

Cuando se registren verifiquen su email porque si no les va a dar un error 403, like para que alguien m谩s lo vea :3

1 requisito = crear una cuenta gratis facil!
2 requisito = tener un plugin desarrollado a mano 馃槮

Mi cabeza quedo explotando con tantas cosas de este curso,

Que lindo este curso.

buenas, me podr铆an ayudar baje el repositorio que hizo el profesor, use el que hice y siempre sale lo mismo

> @alejo89.morales89/platzimediaplayer@1.0.0 build E:\Alejandro Morales S谩nchez\Documentos Universidad\Curso Profesional de JavaScript - Platzi\npm - proyecto-javascript-profesional\mediaplayer
> tsc src/**/*.ts src/plugins/*.ts src/plugins/**/*.ts --outDir lib

error TS6053: File 'src/**/*.ts' not found.


error TS6053: File 'src/plugins/**/*.ts' not found.

error TS6053: File 'src/plugins/*.ts' not found.


Found 3 errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @alejo89.morales89/platzimediaplayer@1.0.0 build: `tsc src/**/*.ts src/plugins/*.ts src/plugins/**/*.ts --outDir lib`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @alejo89.morales89/platzimediaplayer@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\alejo\AppData\Roaming\npm-cache\_logs\2020-05-21T07_16_48_092Z-debug.log

alejo@DESKTOP-08S9QRN MINGW64 /e/Alejandro Morales S谩nchez/Documentos Universidad/Curso Profesional de JavaScript - Platzi/npm - proyecto-javascript-profesional/mediaplayer
$```

Hola 馃槃 si a alguien le ocurre el siguiente error:

src/plugins/Ads/index.ts:2:15 - error TS2614: Module '"./Ads"' has no exported member 'Ad'. Did you mean to use 'import Ad from "./Ads"' instead?

2 import Ads, { Ad } from './Ads';

debe agregar la palabra export a la interface de Ad en Ads.ts:

export interface Ad {
    imageUrl: string,
    title: string, 
    body: string,
    url: string
}

Si les aparece el error 403 a la hora de publicar es bien por :
-No verificaron su cuenta en npm y les manda error el servidor
-Ya existe un paquete con el nombre que eligieron por lo que
deben cambiar el name en el package.json del mediaplayer

Para aquellos que tengan problemas con los archivos CSS o el video, salga un error de not found:
cambien esto

<source src="./assets/BigBuckBunny.mp4" />

por esto

<source src="/assets/BigBuckBunny.mp4" />

Lo mismo con el enlace del archivo css

Alguien me puede explicar la parte del .gitignore??? Ignora el node_modules y el lib, pero no se supone que lo que queremos es subir el c贸digo compilado??? No ser铆a mejor poner que ignore el src que es donde est谩 todo el c贸digo en tsc???

Aprendi mas de npm en este curso que en el curso de npm 馃槀

Sparragus me suena a nickname de WOW o Mu, habla claro profe. Fuera de juego am茅 este curso! Seguro lo tome m谩s de una vez

Si arroja errores con objetos que pueden ser nulos se puede configurar en el tsconfig.json en 鈥渃ompilerOptions鈥

鈥渟trict鈥: false

como extra podrian crear el repositorio y agregarlo al package.json

"repository": {
    "type": "git",
    "url": "https://github.com/DiegoMMR/platzimediaplayer.git"
  }

No me toma los estilos de los anuncios :鈥( se ve una barra blanca nomas

increiblemente facil( si todo sale sin error ) publicar tu codigo en npm, siempre se aprende algo.

Excelente curso me gusto demasiado.

GENIAL!!!

En verdad espectacular, Gracias Richard

Alguien que sepa como ejecutar esos comando en Windows

Muy interesante esta parte, es la primera vez que publicaba algo completamente funcional y auto empaquetado a la web.

estupendo, listo realizado con extinto yujuuu

Super Genial la clase

este flujo es solo para aportar a proyectos open source, o tambien es usado para proyectos en equipo?

Genial!

C贸mo publicar tu proyecto en npm

Muy util

INCREIBLE CURSO!!! 馃槃 馃槷

excelente鈥

alguien sabe porque a m铆 se me p煤blico la carpeta 'src' en lugar de la de 'lib' en NPM?

Excelent ya soy open source!

Ayuda!.. Si alguien pudiera orientarme le estar铆a muy agradecido =D

  1. Tengo el siguiente problema, me salta este error en consola:
Uncaught TypeError: plugIn.run is not a function
    at MediaPlayerr.js:19
    at Array.forEach (<anonymous>)
    at MediaPlayerr.initPlugins (MediaPlayerr.js:18)
    at new MediaPlayerr (MediaPlayerr.js:8)
    at Object.parcelRequire.assets/index.ts[email protected]/mediapalyer (index.ts:11)
    at newRequire (assets.71ddc51b.js:47)
    at assets.71ddc51b.js:81
    at assets.71ddc51b.js:120
  1. Ya he creado y subido sin problemas el plugin a npm, y ya lo agregu茅 a las dependencias en website:
"dependencies": {
    "@zenil/mediapalyer": "^1.0.0"
  }

Nota: estoy consciente del error de dedo que comet铆 al registrar la dependencia mediapalyer xD

  1. Hasta donde pude entender el error es por que uno de los plugins no tienen la funcion run. Buscando en los archivos encontr茅 que dicho plugin era el de Ads el cual lo tengo asi:
export interface Ad {
    imageUrl: string;
    title: string;
    body: string;
    url: string;
}

const ALL_ADS: Ad[] = [Elementos de Ad];

class Ads {

    private static instance: Ads;
    private ads: Ad[];

    private constructor() {
        this.initAds();
    }

    static getInstance() {
        if (!Ads.instance) {
            Ads.instance = new Ads();
        }
        return Ads.instance;
    }

    private initAds() {
        this.ads = [...ALL_ADS];
    }

    getAd() {
        if (this.ads.length === 0) {
            this.initAds();
        }
        return this.ads.pop();
    }
}

export default Ads;

Pero ya he comparado con el proyecto del curso y tampoco lo tiene, entonces, no se cual es el origen del problema =/鈥

馃槷馃槷

A alguien mas le dio este problema?

src/plugins/Ads/index.ts:3:3 - error TS2614: Module '"./Ads"' has no exported member 'Ad'. Did you mean to use 'import Ad from "./Ads"' instead?

3   Ad
    ~~


Found 1 error.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @joshi1216/[email protected]1.0.0 build: `tsc`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @joshi1216/[email protected]1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/josh/.npm/_logs/2020-06-12T15_39_23_349Z-debug.log

buen dato, ahora si a darle al open source!

Excelente.

A alguien m谩s el toc贸 colocar la palabra --save para que se le actualizara el paquete en el archivo package.json?

 npm install @<user>/platzimediaplayer --save

Cuando ya usamos la dependecia de nuestro npm en que momento compilo para que saliera Lib?

Les recomiendo poner las direcciones individuales en el package.json para evitar errores 馃槃

鈩癸笍 Para generar los tipos de typescript, pueden a帽adir 鈥溾揹eclaration鈥 en el script de build. Esto generar谩 los ficheros d.ts dentro de lib para cada fichero, evitando este error en el index.ts de /website:

Los ficheros de declaraci贸n (d.ts) proveen informaci贸n sobre los tipos que un fichero JavaScript contiene, de forma que al consumirlo desde Typescript podemos usar sus tipos (recuerda que la librer铆a, al consumirla desde npm est谩 en Javascript).

驴pero antes de publicar en NPM no es mejor hacer unit testing?

Les comparto el problema con el que me cruc茅. Al 煤ltimo paso, al darle npm start, me compilaba todo bien pero me abr铆a el website sin el video ni los estilos, mi soluci贸n fue:

Borrar el cache: rm -rf .cache dist
Y tambi茅n en chrome en la pesta帽a de PlatziMediaPlayer: Ctrl + Shift + R

Y termin茅 el curso muy feliz jaja

Muy rapido y poco entendible 馃槮

seguimos con JS aprendiendon un monton de cosas nuevas

Por si alg煤n otro estudiante se ha encontrado o se encuentra con el mismo problema con el que he topado yo aqu铆 les va mi experiencia:
al intentar autenticarme con la consola en npm recib铆a un error 403, he visto que es un error recurrente por diversos motivos lo que me llev贸 a intentar de todo y nada daba resultado. Finalmente descubr铆 que el problema se deb铆a a que me encontraba detr谩s de un proxy, y a pesar de poder instalar los paquetes sin ning煤n problema a la hora de publicarlos la historia es muy distinta, finalmente resolv铆 el problema cambiando de red y conect谩ndome esta vez sin un proxy. Espero a alguien le sirva de ayuda

Me corre bien en mi computadora, no me corre bien en GitHub pages help.

GitHub pages
GitHub Repositorio

Ya publiqu茅 mi proyecto y llegu茅 hasta el final, pero no sale el video, me da este error

This expression is not constructable.

en el index.ts de website, alguien que sepa por qu茅 sucede esto y como lo puedo solucionar?

Tengo estos errores
驴Algui茅n sabe c贸mo resolverlos?

error TS6053: File 鈥榮rc/**/*.ts鈥 not found.

error TS6053: File 鈥榮rc/plugins/**/*.ts鈥 not found.

error TS6053: File 鈥榮rc/plugins/*.ts鈥 not found.

Se dieron cuenta que TypeScript transforma las clases en formato de prototipos una vez que lo pasamos a JavaScript? Es bien interesante ver como queda el codigo, en vez de usar spread operator, hace lo mismo con un ciclo for

Les dejo mis apuntes, de los pasos a seguir y las soluciones a los errores que tuve, espero les sirva

Publicaremos el MediaPlayer que hicimos juntos a npm, de tal forma que cualquier otro proyecto puede preinstalarlo y usarlo.

Para publicar npm hay unos requisitos:

  • Se necesita una cuenta en npm (es gratis)

Una ves listo, debemos reestructurar el proyecto de tenemos una divisi贸n de donde esta nuestro website y donde esta mediaplayer, asi que hay que mover carpetas

Luego nos movemos a la carpeta de mediaplayer
Creamos el npm asi: npm init 鈥搚 (-y para decir si a todas las preguntas)

Tenemos nuestro c贸digo fuente en TS y lo debemos mover a JS y para eso instalamos una herramienta como:
**npm i -D typescript **

y agregamos al scripts del package.json
"build": "tsc src//.ts --outDir lib"**,
Lo probamos con: npm run build
Nos falto la carpeta de plugins asi que se agregan al scripts del package.json
"build": "tsc src//
.ts src/plugins/.ts src/plugins/**/.ts --outDir lib"**,
Lo volvemos a correr: npm run build
Tenemos que declarar que el archive principal sera el MediaPlayer en main del package.json asi:
鈥渕ain鈥: 鈥渓ib/MediaPlayer.js鈥,
Verificamos los cambios y agregamos un .gitignore en la carpeta de mediaplayer, porque no queremos que aparezca:
node_modules
lib

Lo volvemos a correr: npm run build
Para publicar escribimos: npm publish --access=public porque es publica
Si sale un error escribir: npm whoami, para saber si ya se esta logueado

En mi caso, me dio error as铆 que necesite registrarme escribiendo:
npm login
Y verificar la cuenta con el correo

Me registre e ingrese, me dio error as铆 que lei que podia ser porque debia actualizar mi npm con estos comandos
sudo npm install -g npm

sudo npm install [email protected] -g

Lo que no fue necesario porque los errores eran:
鈥 Deb铆a registrarme si no tenia cuenta npm
鈥 Luego deb铆a Loguearme, y dar permisos con sudo
鈥 Debia estar en la carpeta correcta, que es mediaplayer por eso daba el error de: ERR! code ELIFECYCLE鈥 etc
鈥 Debia poner mi usuario registrado en npm en name de package.json por eso daba el error de: ERR! code E403 鈥tc

Y al final ya me funciono. 馃槂

Luego salimos de mediaplayer e ingresamos al website

mediaplayer ../
鉃  javascript-profesional cd website
鉃  website

Verificamos que en website/assets/index.ts hacemos referencia a archivos que ya no existen, los vamos a instalar utilizando npm para que queden como parte de dependencias en el package.json de website, escribimos: npm install @usuario/platzimediaplayer
Y cuando esto termine, encontraremos una l铆nea en package.json con este modulo que reci茅n creamos

Nos queda instalar todos los modulos con npm i siempre en la carpeta website, porque cuando movimos las carpetas, sacamos el node_modules

En mi caso como me muestra un error, ejecute npm audit fix para corregirlo.

Ya podemos iniciar el servidor con: npm start, donde parcel hace su trabajo.

Da este error

Server running at http://localhost:1234 
馃毃  /mnt/c/Users/karin/Videos/Beca_Platzi_2020/10mo-Curso Profesional de JavaScript/javascript-profesional/website/assets/index.ts:13:42: Cannot resolve dependency '@usuario/platzimediaplayer/plugins/AutoPause'

Para lo cual revisamos la carpeta de: website\[email protected]\platzimediaplayer\lib\MediaPlayer.js
y agregamo esa ruta en website\assets\index.ts

Volvemos a iniciar el servidor con: npm start y Listo!!

Nuestro website ya no esta utilizando la versi贸n local que desarrollamos de mediaPlayer, esta trayendo la versi贸n que publicamos en npm y la esta utilizando, esto es un aporte OpenSource

Un curso que me hizo aprender mucho

Todo excelente, pero porque pasamos el proyecto a TypeScript para luego volver a JS 馃え
En ese caso pod铆amos desarrolar el proyecto solo en JS

Todo el proceso plagado de errores 馃槳

Que interesante aprender a publicar en npm.

Esta clase en realidad me costo un poco, me salieron varios errores, pero a la final lo logre

excelente clase he aprendido algo muy interesante

:DDDD

,