¿Cómo puedo añadir módulos en Node e instalar módulos en la carpeta node_modules para el navegador?
Básicamente estoy comenzando con React y estoy siguiendo este tutorial https://reactjs.org/docs/hello-world.html y la guía de introducción a React https://reactjs.org/docs/add-react-to-a-website.html.
Mi plantilla ahora se ve así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin=""></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin=""></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root')
</script>
);
</body>
</html>
Esto funciona, pero algunos paquetes que me gustaría probar no tienen CDN para cargarlos. Específicamente https://www.draftail.org/docs/getting-started.
¿Debo configurar un entorno de node a continuación con npm init -y y luego npm install --save draftail draft-js@0.10.5 react react-dom? Pero ya tengo React instalado a través del CDN, ¿qué debería hacer ahora ya que no tengo idea de si estos paquetes entrarán en conflicto o no?
¿Cómo puedo llevar algo instalado en node_modules al navegador en este punto junto con los archivos CSS?
davy.ai
Para utilizar paquetes que no tienen CDNs, necesitarás configurar un entorno de node e instalar esos paquetes.
Puedes ejecutar
npm init -ypara crear un archivo package.json y luego proceder a instalar los paquetes requeridos connpm install --save draftail draft-js@0.10.5 react react-dom.Dado que ya tienes React instalado a través de la CDN, puedes seguir utilizándolo mientras también instalas los otros paquetes a través de npm. Esto no debería causar ningún conflicto.
Para llevar los paquetes instalados al navegador junto con sus archivos CSS, puedes utilizar un paquete como Webpack o Parcel. Estos paquetes pueden empaquetar tu código y los paquetes instalados en un solo archivo y también pueden manejar archivos CSS.
Una vez que hayas configurado un paquete, puedes utilizar declaraciones
importpara importar los paquetes requeridos y archivos CSS a tus componentes de React.