2

Introdução:
Vamos a um exemplo prático, pra que fique simples de se entender...
Eu quero usar o framework Bulma em meu projeto, sendo assim rodo o seguinte comando:

 $ npm install --save-dev bulma

Tchanram! Agora eu consigo encontrar tanto o arquivo bulma.css completo em node_modules\bulma\css\bulma.css como também é possível encontrar os arquivos scss em node_modules\bulma\sass\*, daí me surge o seguinte questionamento

Problema:
Se eu quiser usar o arquivo bulma.css completo, eu deveria referenciar em meu html o caminho pra este arquivo lá no diretório node_modules? Ou seja, inserir em meu <head> a linha: <link rel="stylesheet" href="node_modules\bulma\css\bulma.css">?

Teoricamente faz sentido, afinal quem clonasse o projeto teria que rodar o $npm install, e aí teria a dependência exatamente nesse caminho, mas e se eu quiser dar build desse projeto? Eu teria que obrigatoriamente usar um task runner (gulp) que movesse uma cópia desse arquivo pra dentro de meu projeto?

Enfim, a maneira mais correta de como se fazer o uso dessas dependências me deixaram um pouco confuso, levando em consideração essas necessidades, qual a melhor prática a se adotar?

P.S.: Eu já faço uso do gulp no projeto

1 Resposta 1

2

Tens 3 alternativas:

  • usar CDN, por exemplo https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css
  • usar o ficheiro dentro no node_modules
  • copiar para o teu projeto

A primeira opção é alternativa às outras duas. A segunda desaconselho e a terceira, juntamente com a segunda, é viável.

A razão pela qual se deve evitar usar ficheiros dentro do node_modules é porque se alguém fizer um upgrade dessa dependência os ficheiros antigos (que funcionavam) são alterados e não há como ver as mudanças. Tipicamente excluímos a diretoria toda no Github e as mudanças não são registadas.

Tendo uma cópia só uma ação humana propositada pode fazer o ficheiro mudar, e isso é mais seguro e dá menos bugs.

Para copiar tens várias alternativas. Ou copias à mão, por exemplo com um script assim:

var async = require('async');
var exec = require('child_process').exec;
// funcão para copiar
function copy(from, to, cb){
    var cmd = ['cp', from, to].join(' ');
    exec(cmd, {
        cwd: __dirname + '/../'
    }, function(err){
        if (err) console.log('Copy failed.', err);
        else cb(err);
    });
}
// módulos que precisam ser copiados
function copyDatePicker(cb){
    async.series([
        function(next){
            copy(
                'node_modules/component-picker/lib/ComponentPicker.js',
                'public/javascript/ComponentPicker.js',
                next
            );
        }, function(next){
            copy(
                'node_modules/component-picker/lib/ComponentPicker.css',
                'public/css/ComponentPicker.css',
                next
            );
        }
    ], cb);
}

ou podes usar no código:

const biblioteca = require('minhaBiblioteca');

e depois compilar com webpack ou browserify e assim eles importam o código necessário para dentro de um novo ficheiro .js criado com o código todo.

3
  • Se eu optasse pela alternativa do CDN, nem precisaria instalar o framework como dependência certo? Pra mim só faz sentido instalar como dependência se eu fosse utilizar os arquivos scss para serem incluídos em meus estilos na medida do necessário ... estou correto? Commented 23/10/2016 às 14:58
  • @ViniciusColares exato. Se não precisas de os modificar e não precisas de trabalhar offline então CDN parece-me o mais simples.
    – Sergio
    Commented 23/10/2016 às 14:59
  • @Sergio se o aconselhável é copiar os fontes para dentro de uma estrutura interna, qual é a vantagem da utilização do NPM para simplesmente baixar os pacotes? Sendo que se for baixar os pacotes individualmente eu posso fazer direto pelo Github ou baixar o bundle dos CDNs que inclusive vai me evitar de baixar diversos fontes desnecessários e de dependências que eu não necessariamente utilize. Neste quesito não estou vendo aplicação real para baixar as bibliotecas via npm. Fazendo um paralelo, eu achava que o npm criaria um autoload assim como o composer do php faz.
    – Paulo Lima
    Commented 23/08/2018 às 14:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .