@corabank/ibanking NPM

iBanking

Helpers and Configs for iBanking Apps

Install

npm install --save @corabank/ibanking

Iniciar Projeto

Instalar dependências

npm i

Iniciar projeto para desenvolvimento

npm start

Obs: Utilize npm link ou o yalc para testes locais

Arquivos de config

Fornece algumas configurações que se repetem entre as apps do ibanking

Estrutura depois do build:

- .husky/
- .eslintrc.json
- .prettierrc.js
- jest.config.js
- cert.pem
- key.pem
- lib/
  - webpack/
  - .stylelintrc.json
  - babel.config.js
  - tsconfig.json

babel.config.ts, exemplo de import:

const config = require('@corabank/ibanking/lib/babel.config').default

const { name } = require('./package.json')

module.exports = config(name)

Webpack

Fornece o help createWebpackConfig que retorna as configs inicias do Webpack para os apps do ibanking. Esse help só é preciso caso você precise editar ou passar alguma propriedade para essa config.

Para usar esse help é necessário criar um arquivo na ibanking.config.ts na raiz do projeto.

Exemplo:

import { createWebpackConfig } from '@corabank/ibanking/lib/webpack'

export default createWebpackConfig({
  exposes: {
    '.': './src/shared',
  }
})

Outro exemplo (agora passando um callback):

import { createWebpackConfig } from '@corabank/ibanking/lib/webpack'

export default createWebpackConfig(() => ({
  exposes: {
    '.': './src/shared',
  }
}))

Obs: O callback te retorna 3 parâmetros, são esses:

Name	Type	Descricão
env	object	As `envs` do próprio Webpack
config	object	`Config` do próprio Webpack

Exemplo:

import { createWebpackConfig } from '@corabank/ibanking'

export default createWebpackConfig((env, config) => ({
  exposes: ...,
  remotes: ...,
  templateData: ...,
  webpack: () => {},
  shared: () => {},
}))

Você pode passar algumas propriedades para o createWebpackConfig, segue abaixo:

Name	Type	Descricão
exposes	object	São as pastas que vão ser expostas para outras apps
remotes	object	São outros micro-frontends que você se conectar em tempo de build
templateData	object	Usado só pelo `shell`, e basicamente são variáveis que você pode passar o template
webpack	function	É a função de configuração do Webpack, funciona da mesmo forma que o usado em um webpack.config.ts
shared	function	É uma função que retorna as dependências que devem ser compartilhadas entre outros micro-frontends

Aliases

Essa lib já oferece alguns aliases seguindo a estrutura definida no Chapter: Frontend

`~`: "."
`@Source`: "./src"
`@Config`: "./config"
`@Store`: "./src/store"
`@Utils`: "./src/utils"
`@Requests`: "./src/requests/"
`@Hooks`: "./src/hooks"
`@Pages`: "./src/pages"
`@Components`: "./src/components"
`@Containers`: "./src/components/containers"
`@Commons`: "./src/components/commons"