A configuração do assassino Storybook Webpack

Harry Ghazni Seg , 17 de Julho · 5 min ler

Ei, pssst… sim, você… vem aqui… você precisa de uma configuração de livro de histórias? Você me ouviu. Você precisa acessar as variáveis globais do SCSS, não é? Bem, eu tenho apenas o remédio para você. Olhe para isso escondido no meu trench coat inacreditavelmente manchado … yeahhhhh é uma configuração do webpack assassino. O que? Não, não, coloque essa maleta de barras de ouro, o seu dinheiro não é bom aqui amigo… .este é em casa. Eu vou te mostrar o mundo.

O que é o livro de histórias?

É muito útil é o que é. Storybook é uma ferramenta de código aberto para o desenvolvimento de componentes de interface do usuário isoladamente. É principalmente acoplado com React, Angular e Vue.

Nós, no entanto, estaremos usando Reagir. O objetivo deste artigo é criar uma configuração para o Storybook que forneça às suas histórias acesso global a variáveis do SCSS, TypeScript, React, Babel e outras vantagens. Esta é a construção de livro de histórias mais matadora que você precisará.

Não posso seguir os documentos para uma configuração?

Sim, se você quer construir seus componentes de interface do usuário tendo que incluir todas as variáveis do SCSS manualmente, resolver o CSS ou não ter acesso às variáveis do SCSS? Os documentos oficiais só levarão você até aqui, mas ela perde muitos dos principais problemas que você encontrará ao criar uma sólida compilação de webpack de storybooks. Então você terá que jogar minesweeper com todas as versões do pacote para cada dependência … felizmente para você, eu já sofri por você.

Instalação

Felizmente, não vou pedir que você ponha manualmente essa configuração inteira. Eu já fiz o trabalho pesado para você. Se, no entanto, você decidir que quer atendê-lo às suas necessidades. Sinta-se à vontade para cortar e alterar o que você não quer após cloná-lo.

Primeiro, git clone esse bad boy para baixo.

 git clone https://github.com/hghazni/killer-storybook-config.git 
cd killer-storybook-config

Assim que tiver o repo, precisamos: –

 npm i 
npm run storybook

E é sobre isso ?

Agora, se você quiser executar o React após instalar os pacotes, simplesmente: –

 npm start