Saltar al contenido

Cómo publicar los módulos de reacción del ES6 al NPM

Podemos empezar con un directorio vacío y llamarlo «mi-react-app». Luego, ejecutaremos algunos comandos dentro de este directorio. Comencemos ejecutando npm init. La consola nos pedirá que le demos algunas entradas. Ingresa la misma y sigue presionando ENTER hasta que termine de pedir la información.

A continuación, instalaríamos las dependencias para nuestra aplicación.

Cómo publicar los módulos de reacción del ES6 al NPM
Cómo publicar los módulos de reacción del ES6 al NPM
1npm install --save react webpack

Ya que estamos escribiendo un componente de React, necesitamos la biblioteca de React así como el Webpack para transponer el código JavaScript de ES6/JSX a ES5.

A continuación, instalaremos las devDependencias

1npm install -D webpack-cli babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx babel-preset-env

Cuando nuestro paquete se publique y alguien quiera consumirlo, simplemente ejecutará npm install my-react-app y todas las dependencias se instalarán automáticamente. Sin embargo, «devDependencias» no se instalará.

Entonces actualizaremos el paquete.json para configurar Reaccionar como dependencias de pares. «Dependencias de pares» son dependencias especiales que aparecen sólo cuando publicamos nuestro paquete. Declarar «peerDependencies» implica que nuestro paquete necesita una versión de dependencia que es la misma versión exacta de alguien que consumirá nuestro paquete. En cuanto a la publicación de los módulos de React, esto puede resultar muy útil, ya que podemos tener una sola copia de «react-dom» y la misma versión será utilizada por alguien que instale nuestro paquete.

Establecemos el «main» o punto de entrada como index.js y también establecemos los guiones «build» y «start». Además, esto debería coincidir con el nombre de archivo de salida que es creado por Webpack, una vez que nuestro código es transpuesto del código ES6 o JSX al código ES5, ya que eso es lo que los navegadores soportan ampliamente.

Así es como se vería nuestro paquete:

1234567891011121314151617181920212223242526272829303132333435{"nombre": "mi-react-app", "versión": "1.0.0", "descripción": "Cómo publicar los módulos ES6 React a NPM!", "main":"./index.js", "peerDependencias":{"react":"^16.4. 0"}, "scripts":{"start": "webpack -watch", "build": "webpack", "test": "echo N "Error: no se ha especificado ningún testN" && exit 1"}, "author":"", "license": "ISC", "keywords":["promise", "async", "Virtual reality (VR)", "Augmented reality (AR)"], "dependencias":{"react":"^16. 8.6", "webpack":"^4.29.6"}, "devDependencias":{"babel-cli":"^6.26.0", "babel-core":"^6.26.3", "babel-loader":"^8.0. 5", "babel-plugin-transform-object-rest-spread":"^6.26.0", "babel-plugin-transform-react-jsx":"^6.24.1", "babel-preset-env":"^1.7.0", "webpack-cli":"^3.3.0"}}

json

Aquí la propiedad «keywords» es un conjunto de palabras clave con valores de cadena. Puede ser una colección de palabras clave usadas para describir nuestro módulo. Cuando nuestro paquete se publica, puede ser realmente útil para identificar nuestro paquete.

Entonces tendremos que configurar el webpack para transponer nuestro código. Para ello, actualizaremos los archivos webpack.config.js y .babelrc como se indica a continuación:

123456789101112131415161718192021222324252627282930313233343536373839// webpack.config.jsvar path =require($0027path$0027);varExtractTextPlugin=require($0027extract-text-webpack-plugin$0027);module. exports={ entry:$0027./index.js$0027, output:{ path: path.resolve(__dirname,$0027build$0027), filename:$0027index.js$0027, libraryTarget:$0027commonjs2$0027}, module:{ rules:[{ test:/. js$/, include: path.resolve(__dirname,$0027src$0027), exclude:/(node_modules|bower_components|build)/, use:{ loader:$0027babel-loader$0027, options:{ presets:[$0027env$0027]}},{ test:/. *css$/, use :ExtractTextPlugin.extract({ fallback :$0027style-loader$0027, use :[$0027css-loader$0027,$0027sass-loader$0027]},]}, externalals:{$0027react$0027:$0027commonjs react$0027}};

javascript

Es importante establecer la salida => libraryTarget como «commonjs2». Esto establecería la propiedad module.exports en nuestro archivo de salida al componente React. Esto es necesario para que nuestro componente personalizado sea usado como un paquete npm.

A continuación, establecemos el .babelrc como se indica a continuación:

1234567{"presets":["env"], "plugins":["transform-object-rest-spread", "transform-react-jsx"]}

json

Esto se utiliza para configurar los preajustes utilizados por Babel para transponer nuestro código personalizado del componente React ES6/JSX al ES5.

Si miras en el archivo webpack.config.js de arriba, notarás que estamos configurando el webpack para aplicar $0027babel-loader$0027 en todos los archivos *.js en la sección modules.rules.

También crearemos un archivo .npmignore como se indica a continuación:

1234srcdemo.babelrcwebpack.config.js

json

Al añadir lo anterior, sólo instruimos a nuestro cliente npm sobre qué archivos debe excluir al publicar en el paquete npm repo. Esencialmente ayuda a mantener nuestro paquete limpio al tener sólo los archivos necesarios para ejecutar nuestro componente personalizado de Reacción en Producción. Notarán que no hay ninguna entrada node_modules aquí, ya que eso es automáticamente ignorado por NPM.