Importar desde node_modules en Svelte.

Permítanme predecir esto diciendo que mi conocimiento de aplicaciones node y javascript es muy limitado, todo mi conocimiento de programación viene de un fondo de análisis de datos de python.

Entonces, estoy tratando de aprender frontend y construir una aplicación en Svelte. Serviré esta aplicación con otro backend, por lo que no estaré utilizando SvelteKit. También estoy usando Ionic para mi marco de UI. Probablemente usaré Routify para la enrutación, pero esto va más allá del alcance de esta pregunta. Además, sé que Svelte no está oficialmente soportado por Ionic, pero no estoy interesado en usar otro marco.

El método simple sería incluir el CDN de Ionic en el index.html de Svelte. Sin embargo, me gustaría mantener mis archivos en un solo lugar cuando construya la aplicación final y no requerir un CDN o incluso posiblemente una conexión de red si decido usar Capacitor para construir dispositivos móviles. Entonces, no estoy seguro de cómo proceder. Me gustaría agrupar Ionic (Ionic/Core – IonicIcons) con los paquetes JS y CSS predeterminados que Svelte construye con Rollup. Buscando un poco, descubrí que aparentemente necesito usar algo llamado “rollup-plugin-css-only” para agrupar el CSS y de alguna manera incluir los archivos JS en commonjs en el “rollup.config.js”. Intenté agregar la ruta a los archivos JS a commonjs, pero no pude ver cambios en el JS agrupado que svelte produce. Tampoco tengo idea de cómo agregar el css o usar “rollup-plugin-css-only”. Las instrucciones y explicaciones que he encontrado no han sido muy útiles.

Entonces, en resumen … Estoy tratando de agrupar Ionic en mi proyecto Svelte sin usar un CDN y aún no he descubierto cómo hacerlo. Es posible que tampoco esté entendiendo correctamente este flujo de trabajo, así que háganme saber si me equivoco en algo. Solo necesito una explicación o ejemplo de Ionic agrupado en una aplicación Svelte. También me gustaría mencionar que el flujo de trabajo que estoy buscando también permitirá temas personalizados en Ionic con el procesamiento CSS.

davy.ai

June 12, 2023 at 4:41 am

Para agregar Ionic a su proyecto Svelte sin usar un CDN, deberá utilizar Rollup, un empaquetador de módulos. Ha mencionado que ya intentó agregar la ruta de los archivos JS en CommonJS, pero no vio cambios en el resultado JS empaquetado. Es importante tener en cuenta que agregar la ruta de los archivos JS en CommonJS por sí sola no los incluirá en el paquete final. También deberá importarlos en su proyecto.

Estos son los pasos para empaquetar Ionic con su proyecto Svelte usando Rollup:

Instale los paquetes requeridos: npm install --save-dev rollup-plugin-css-only @ionic/core svelte-preprocess

En el archivo rollup.config.js, agregue el siguiente código en la parte superior:

import sveltePreprocess from 'svelte-preprocess';
import css from 'rollup-plugin-css-only';
import { nodeResolve } from '@rollup/plugin-node-resolve';

const production = !process.env.ROLLUP_WATCH;
const preprocess = sveltePreprocess({ /* opciones */ });

Agregue el siguiente código en el archivo rollup.config.js bajo la sección de plugins:
```
css({
 output: 'public/build/bundle.css'
}),
```
Esto extraerá el CSS en un archivo separado en lugar de incluirlo en el paquete JS.
En el archivo rollup.config.js, agregue el siguiente código bajo la sección de plugins:
```
nodeResolve({ browser: true, dedupe: ['svelte'] }),
```
Esto resolverá cualquier paquete de terceros utilizado en su proyecto.

Importe el CSS de Ionic en su archivo app.svelte:

<style>
 @import '@ionic/core/css/core.css';
 @import '@ionic/core/css/ionic.bundle.css';
</style>

Importe el JS de Ionic en su archivo main.js:

import { defineCustomElements } from '@ionic/core/loader';
defineCustomElements(window);

Use cualquier componente de Ionic que necesite en sus componentes Svelte:
```
<ionbutton>Haz clic en mí!</ionbutton>
```
Si encuentra errores relacionados con componentes Ionic, asegúrese de haber importado @ionic/core en su componente y verifique la documentación para cualquier configuración adicional necesaria.

Después de completar estos pasos, ejecute npm run build para construir su proyecto Svelte con los componentes de Ionic incluidos. Los archivos de salida se ubicarán en el directorio public/build.

Answer

davy.ai

June 12, 2023 at 4:41 am
Para agregar Ionic a su proyecto Svelte sin usar un CDN, deberá utilizar Rollup, un empaquetador de módulos. Ha mencionado que ya intentó agregar la ruta de los archivos JS en CommonJS, pero no vio cambios en el resultado JS empaquetado. Es importante tener en cuenta que agregar la ruta de los archivos JS en CommonJS por sí sola no los incluirá en el paquete final. También deberá importarlos en su proyecto.

Estos son los pasos para empaquetar Ionic con su proyecto Svelte usando Rollup:
1. Instale los paquetes requeridos: npm install --save-dev rollup-plugin-css-only @ionic/core svelte-preprocess
2. En el archivo rollup.config.js, agregue el siguiente código en la parte superior:
```
import sveltePreprocess from 'svelte-preprocess';
import css from 'rollup-plugin-css-only';
import { nodeResolve } from '@rollup/plugin-node-resolve';

const production = !process.env.ROLLUP_WATCH;
const preprocess = sveltePreprocess({ /* opciones */ });
```
3. Agregue el siguiente código en el archivo rollup.config.js bajo la sección de plugins:
```
css({
 output: 'public/build/bundle.css'
}),
```
  Esto extraerá el CSS en un archivo separado en lugar de incluirlo en el paquete JS.
4. En el archivo rollup.config.js, agregue el siguiente código bajo la sección de plugins:
```
nodeResolve({ browser: true, dedupe: ['svelte'] }),
```
  Esto resolverá cualquier paquete de terceros utilizado en su proyecto.
5. Importe el CSS de Ionic en su archivo app.svelte:
```
<style>
 @import '@ionic/core/css/core.css';
 @import '@ionic/core/css/ionic.bundle.css';
</style>
```
6. Importe el JS de Ionic en su archivo main.js:
```
import { defineCustomElements } from '@ionic/core/loader';
defineCustomElements(window);
```
7. Use cualquier componente de Ionic que necesite en sus componentes Svelte:
```
<ionbutton>Haz clic en mí!</ionbutton>
```
  Si encuentra errores relacionados con componentes Ionic, asegúrese de haber importado @ionic/core en su componente y verifique la documentación para cualquier configuración adicional necesaria.
Después de completar estos pasos, ejecute npm run build para construir su proyecto Svelte con los componentes de Ionic incluidos. Los archivos de salida se ubicarán en el directorio public/build.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Importar desde node_modules en Svelte.

Answer

davy.ai