ionic framework - imagenes - Cómo ampliar la configuración predeterminada de paquete web en Ionic v2

ionic image responsive

Question

Me gustaría extender la configuración predeterminada de paquete web de ionic. Específicamente, me gustaría agregar un alias para resolver módulos para poder importar módulos por su ruta absoluta, en lugar de una relativa:

En lugar de importar módulos como este:

import { SomeComponent } from ''../../components/some.component.ts'';

quiero

import { SomeComponent } from ''@app/components/some.component.ts'';

donde @app es un alias para el directorio raíz.

En otros proyectos, pude hacer esto agregando algo como esto a la configuración de la carpeta web:

module.exports = {
    ...   
    resolve: {
        extensions: [''.ts'', ''.js''],
        alias: {
            ''@app'': path.resolve(''./''),
        }
    },
    ...
};

No estoy seguro de cómo hacer esto con Ionic sin anular la configuración de paquete web predeterminada.

Answer 1

Mapeo de ruta del módulo en la versión @Ionic - 3.14.0

En caso de que alguien esté teniendo problemas similares para descubrir los cambios exactos para que esto funcione.

En ionic 3 (versión 3.14.0), para que funcione la asignación de alias , deberá definir la asignación de ruta tanto en webpack.config.js como en tsconfig.json

1. paquete.json

Para usar una configuración de paquete web personalizada, configure su package.json para cargar su webpack.config.js personalizado.

"config": {
    "ionic_webpack": "./config/webpack.config.js"
  }

2. config / webpack.config.js

• Referencia el paquete web existente
• Definir la ruta del alias

• Combina el alias con la configuración de paquete web predeterminada ...

  const path = require(''path'');
  const { dev, prod } = require(''@ionic/app-scripts/config/webpack.config'');
  const webpackMerge = require(''webpack-merge'');
  
  const customConfig = {
    resolve: {
      alias: {
        ''@app'': path.resolve(''src/app''),
        ''@pages'': path.resolve(''src/app/pages''),
        ''@constants'': path.resolve(''src/app/constants''),
        ''@components'': path.resolve(''src/app/components''),
        "@shared": path.resolve(''src/app/shared'')
      }
    }
  };
  
  module.exports = {
       dev: webpackMerge(dev, customConfig),
       prod: webpackMerge(prod, customConfig)
  };

3. config / test / webpack.config.js

• Referencia el paquete web existente
• Definir la ruta del alias

• Combina el alias con la configuración de paquete web predeterminada ...

  const path = require(''path'');
  const webpackDefault = require(''@ionic/app-scripts/config/webpack.config'');
  const webpackMerge = require(''webpack-merge'');
  
  const customConfig = {
    resolve: {
      alias: {
        ''@app'': path.resolve(''src/app''),
        ''@pages'': path.resolve(''src/app/pages''),
        ''@constants'': path.resolve(''src/app/constants''),
        ''@components'': path.resolve(''src/app/components''),
        "@shared": path.resolve(''src/app/shared'')
      }
    }
  };
  
  module.exports = webpackMerge(webpackDefault, customConfig);

4. tsconfig.json

• Defina baseUrl & paths en tsconfig.json siguiente manera:

    {
     "compilerOptions": {
       "baseUrl": "./src",
       "paths": {
         "@app/*": ["app/*"],
         "@pages/*": ["app/pages/*"],
         "@constants/*": ["app/constants/*"],
         "@components/*": ["app/components/*"],
         "@shared/*": ["app/shared/*"]
       }
     },
   }

Ref: Mi información de env iónica

paquetes cli:

@ionic/cli-plugin-proxy : 1.4.13
@ionic/cli-utils        : 1.14.0
ionic (Ionic CLI)       : 3.14.0

paquetes globales:

cordova (Cordova CLI) : 7.1.0

paquetes locales:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 ios 4.5.1
Ionic Framework    : ionic-angular 3.6.0

Answer 2

En las versiones recientes de ionic, alias no funciona a menos que use esta corrección (deje que el cargador de tipografías sepa el alias): tsconfig.json

  "compilerOptions": {
...
    "baseUrl":  "./src",
    "paths": {
      "@app/config": ["config/config"]
    }
  }
...

crédito: https://github.com/ionic-team/ionic-app-scripts/pull/683#issuecomment-294078919

Mi información iónica:

cli packages: (/Users/.../node_modules)

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

paquetes globales:

Cordova CLI : 7.0.1 

paquetes locales:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.6.0

Sistema:

Node       : v6.9.5
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
npm        : 5.3.0 

Answer 3

Es posible que desee copiar el archivo webpack.config.js existente, modificarlo y configurarlo para usarlo en lugar del archivo inicial.

Aquí están los pasos

1. En la carpeta raíz de su proyecto, cree la carpeta config y copie el archivo webpack.config.js allí (este archivo se encuentra en ../node_modules/@ionic/app-scripts/config

2. Modificar el archivo copiado según sea necesario

3. En el archivo package.json de su proyecto, agregue:

   "config": { "ionic_bundler": "webpack", "ionic_webpack": "./config/webpack.config.js" }

Answer 4

La respuesta aceptada funciona bien, pero deberá actualizar webpack.config.js cada vez que actualice app-script . Por lo tanto, en lugar de copiar el código, webpack.config.js en webpack.config.js

package.json

  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  }

webpack.config.js

const webpackConfig = require(''../node_modules/@ionic/app-scripts/config/webpack.config'');
webpackConfig.resolve = {
                    extensions: [''.ts'', ''.js''],
                    alias: {
                            ''@app'': path.resolve(''./''),
                            }
                  }

En la mayoría de los casos, puede seguir este enfoque y no tendrá que actualizar la config cada vez que actualice app-script

Answer 5

La respuesta de Hola Maverick09 es increíble, pero no funcionó para mí. Estoy usando esta configuración:

paquetes cli:

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2

paquetes locales:

@ionic/app-scripts : 3.0.1
Ionic Framework    : ionic-angular 3.8.0

Sistema:

Node : v6.10.0
npm  : 3.10.10
OS   : Windows 10

la configuración predeterminada tiene dos partes dev y prod, así que si cambias la configuración personalizada de esta manera, parece que todo funciona

const customConfig = {
    dev: {
        resolve: {
            alias: {
                ''@app'': path.resolve(''src/app''),
                ''@pages'': path.resolve(''src/pages''),
                ''@common'': path.resolve(''src/common''),
                ''@storyboards'': path.resolve(''src/storyboards''),
                "@locale": path.resolve(''src/locale'')
            }
        }
    },
    prod: {
        resolve: {
            alias: {
                ''@app'': path.resolve(''src/app''),
                ''@pages'': path.resolve(''src/pages''),
                ''@common'': path.resolve(''src/common''),
                ''@storyboards'': path.resolve(''src/storyboards''),
                "@locale": path.resolve(''src/locale'')
            }
        }
    }
};