Visual Studio 2017 e Single File Components

[andre-rafa-b]

Estou há 2 meses usando vue nos meus projetos. Achei mais simples de dar manutenção. Muito melhor do que a "bagunça" que ficava usando JQuery. Ontem tentei melhorar a organização das coisas usando single file component (.vue) no meu projeto MVC 5. Instalei o webpack pelo nuget. Achei horrível o fato dele baixar mais de 100MB de arquivos de dependências ao projeto. Segui instruções de vários sites para conseguir gerar os artefatos a partir do webpack.config.js e nada aconteceu. Tentei usar o webpackNET. Segui as instruções do site do projeto sem sucesso também. Dava build no projeto e nenhum artefato era gerado, apenas as dependências eram adicionadas ao projeto.

Eu sou o cara mais experiente de uma equipe pequena de desenvolvedores (6) e costumo definir os padrões e tecnologias para o resto da equipe Expliquei as dificuldades que estou tendo e agora seguem minhas perguntas.

1 - Existe uma forma de não incluir esse monte de dependências ao projeto? Usar arquivos de forma global...

2 - Vocês indicam algum outro tutorial que realmente funcione com projetos MVC5 e Visual Studio 2017? O resultado que eu quero é que os artefatos sejam gerados após o save de cada alteração. Acho meio inútil listrar minha estrutura de arquivos visto que eu não recebi nem uma mensagem de erro, mas segue a lista: ~/Scripts/Vue/webpack.config.js ~/Scripts/Vue/app/teste.vue

Eu gostaria muito de trabalhar com arquivos .vue, mas a experiência que eu tive até agora foi negativa. Me senti configurando uma aplicação java, mas foi frustrante não conseguir ver nenhum resultado.

[andre-rafa-b]

Eu não sei se eu deleto esse tópico, mas consegui me entender com o VS. Ainda não tenho todas as respostas, mas terei que ler mais. Foram mais de 24 horas estudando esse npm + vue + webpack + webpack task runner.

Uma dúvida surgiu. Eu preciso do webpack.config.js na raiz do meu projeto ou posso colocar em qualquer pasta? Colocando em outra pasta e navegando pelo console na hora de executar o npm não funcionou.

[danielschmitz]

Olá @andre-rafa-b , a melhor forma de você usar o webpack é criando um projeto do zero através do vue init webpack myproject e já tendo tudo pronto na sua mão, bastando apenas começar o desenvolvimento. Lembre-se que tanto o Vue quanto react ou Angular funcionam melhor numa arquitetura SPA, quando frontend e backend estão completamente separados. Em uma metodologia MVC não sei bem como seria o Vue, principalmente usando Single File Components.

O fato de você alterar o arquivo de lugar e não funcionar depende da sua configuração. dê uma olhada no packaje.json na seção scripts

Da forma como você está fazendo, eu recomendo que estude muito bem o webpack, de forma que você possa fazer da forma como deseja.

Nao delete a duvida, coloque as soluções encontradas .

[andre-rafa-b]

@danielschmitz , obrigado pelas informações. Eu finalmente consegui o resultado esperado!

Ainda não posso escrever um tutorial a respeito pois algumas coisas ainda não estão claras. Encontrei muita explicação que mistura soluções diversas e isso acabou confundindo mais. Os próprios exemplos no site da VueJS são pobres quando o assunto é single file component. Não que seja necessário exemplos mais complexos, mas o código não está completo e depende de uma certa experiência para deduzir o que está faltando.

Respondendo aos meus questionamentos:

1 - Eu acabei ignorando a criação da pasta node_modules no projeto. Só tenho que ter cuidado para ninguém incluir essa pasta no TFS. As bibliotecas que eu consegui linkar funcionaram sem problemas.

2 - A resposta seria uma mistura do webpack task runner com configuração do scripts no package.json para usar o webpack-dev-server. Como eu tinha perdido tempo demais só para ter o resultado do meu componente na tela, resolvi deixar essa pendência para ver depois. Sendo assim, após cada modificação eu estava usando o task runner para gerar o js final.

Eu também perguntei se eu preciso do webpack.config.js na raiz do projeto: Para aparecer no Task Runner Explorer sim, eu preciso, mas eu posso executar o arquivo através do package.json (este sim na raiz da aplicação). Exemplo da configuração:

"scripts": {
		"dev": "webpack --mode development --config Scripts/Admin/webpack.config.js",
		"build": "webpack --mode production --config Scripts/Admin/webpack.config.js"
	}

Meu erro foi pensar que o Task Runner monitorava a existência desses arquivos no projeto. Eu provavelmente irei criar um projeto a parte para os componentes vue + webpack sem misturar com MVC.

Eu tenho outras dúvidas, mas acho melhor abrir outro tópico para falar a respeito.