Tutorial desarrollo de nuevos plugins

! Página en desarrollo

En esta página vamos a ver paso a paso cómo crear un nuevo plugin, partiendo de tener en nuestro repositorio personal un fork de API-CNIG.

1./ Nos dirigimos a la carpeta plugins:

    cd API-CNIG/api-ign-js/src/plugins/

2./ Hacemos la instalación del paquete npm que nos ayudará a crear el plugin

    npm i api-cnig-create-plugin

3./ Lanzamos el comando para crear la estructura del plugin

    npx api-cnig-create-plugin

Este comando nos pedirá el nombre del plugin y si queremos instalar las dependencias npm útiles para el desarrollo de plugins. Para el ejemplo, usaremos el nombre «prueba» para el plugin.

3.1 Como alternativa a la herramienta de creación de plugin, existe una plantilla en la carpeta plugins (basic)

Si queremos usar la plantilla copiamos la carpeta basic y la pegamos en la misma carpeta de plugins. Tendremos que modificar el nombre a la carpeta y a todos los ficheros cambiando "basic" por el nombre de plugin que queramos. También, en los ficheros tendremos que cambiar las referencias a "basic" por el nuevo nombre del plugin.

4./ Nos vamos a la carpeta del plugin:

    cd ./prueba

5./ Ejecutamos el comando de instalación y levantado del servidor

    npm i
    npm start

En el caso de dar el error: SyntaxError: Unexpected token '??='. Hay que subir la versión de nodeJS a la v16.20.2

En el caso de dar algún error de Eslint o webpack, vamos a realizar los siguientes pasos:

5.1 Copiamos desde, por ejemplo, el plugin modal, el archivo package.json y lo pegamos en nuestra carpeta del plugin «prueba», modificando el nombre, versión y descripción

5.2 Copiamos desde, por ejemplo, el plugin modal, la carpeta webpack-config y lo pegamos en nuestra carpeta del plugin «prueba/webpack-config».

5.3 Ejecutamos:
    npm run fix

5.4 En el caso de dar el error: Unexpected use of file extension "json" for "../../api.json". En el archivo api-ign-js/src/plugins/prueba/src/facade/js/modal.js hay que modificar la línea "import api from '../../api.json';" por "import api from '../../api';"

5.5 Volvemos al punto 5.

6./ En este punto, podemos comenzar a desarrollar nuestro nuevo plugin a partir de los archivos que hay en ./src

7./ Una vez terminado el desarrollo, podemos comprobar que el plugin no tiene errores:

    npm run check

8./ Para arreglar la mayoría de errores que se comenten durante el desarrollo, se puede ejecutar el siguiente comando:

    npm run fix

Este comando está relacionado con eslint. Si se tiene instalada la extensión en vscode (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), se pueden ir comprobando los errores según se va programando.

9./ El siguiente paso es compilar el plugin:

    npm run build

10./ Y por último, para comprobar que la compilación ha ido bien, se puede volver a levantar el servidor y esta vez acceder a http://IP:Puerto/test/prod.html