Publicar en npm

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 ‘src/**/*.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: “tsc 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:

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

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

“build”: “tsc”,

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 “compilerOptions”

“strict”: 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…

https://github.com/platzi/javascript-profesional

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 “–declaration” 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 ‘src/**/*.ts’ not found.

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

error TS6053: File ‘src/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 (-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:
“main”: “lib/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 …etc

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

,