Como incluir scripts localizados dentro da pasta node_modules?

Tenho uma pergunta sobre as melhores práticas para inclusão node_modulesem um site HTML.

Imagine que eu tenho o Bootstrap dentro da minha node_modulespasta. Agora, para a versão de produção do site, como incluiria o script Bootstrap e os arquivos CSS localizados dentro da node_modulespasta? Faz sentido deixar o Bootstrap dentro dessa pasta e fazer algo como o seguinte?

<script src="./node_modules/bootstrap/dist/bootstrap.min.js"></script>

Ou eu teria que adicionar regras ao meu arquivo gulp que copiasse esses arquivos na minha pasta dist? Ou seria melhor deixar o gulp de alguma forma remover completamente o bootstrap local do meu arquivo HTML e substituí-lo pela versão CDN?

Normalmente, você não deseja expor nenhum dos seus caminhos internos para saber como o servidor está estruturado para o mundo externo. O que você pode é criar uma /scriptsrota estática em seu servidor que busca seus arquivos em qualquer diretório em que residam. Portanto, se seus arquivos estiverem "./node_modules/bootstrap/dist/". Em seguida, a tag de script em suas páginas fica assim:

<script src="/scripts/bootstrap.min.js"></script>

Se você estava usando express com nodejs, uma rota estática é tão simples quanto isto:

app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));

Em seguida, todas as solicitações de navegador /scripts/xxx.jsserão buscadas automaticamente no seu distdiretório em __dirname + /node_modules/bootstrap/dist/xxx.js.

Nota: As versões mais recentes do NPM colocam mais coisas no nível superior, não aninhadas tão profundamente; portanto, se você estiver usando uma versão mais recente do NPM, os nomes dos caminhos serão diferentes dos indicados na pergunta do OP e na resposta atual. Mas, o conceito ainda é o mesmo. Você descobrir onde os arquivos estão localizados fisicamente na sua unidade de servidor e você faz um app.use()com express.static()para fazer um pseudo-caminho para esses arquivos para que você não está expondo a organização do sistema de arquivos do servidor real para o cliente.

Se você não deseja criar uma rota estática como essa, provavelmente é melhor copiar os scripts públicos para um caminho que o servidor da Web trate como /scriptsou qualquer outra designação de nível superior que você deseja usar. Geralmente, você pode fazer essa cópia parte do seu processo de criação / implantação.

Se você deseja tornar público apenas um arquivo em particular em um diretório e nem tudo o que é encontrado nesse diretório, pode criar manualmente rotas individuais para cada arquivo, em vez de usar express.static()como:

<script src="/bootstrap.min.js"></script>

E o código para criar uma rota para isso

app.get('/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

Ou, se você ainda deseja delinear rotas para scripts /scripts, faça o seguinte:

<script src="/scripts/bootstrap.min.js"></script>

E o código para criar uma rota para isso

app.get('/scripts/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

Eu usaria o módulo path npm e, em seguida, faria algo assim:

var path = require('path');
app.use('/scripts', express.static(path.join(__dirname, 'node_modules/bootstrap/dist')));

IMPORTANTE: usamos path.join para fazer a junção de caminhos usando a maneira independente do sistema, ou seja, no Windows e no Unix, temos diferentes separadores de caminho (/ e)

Como mencionado por jfriend00, você não deve expor sua estrutura de servidor. Você pode copiar os arquivos de dependência do projeto para algo como public/scripts. Você pode fazer isso muito facilmente com o dep-linker como este:

var DepLinker = require('dep-linker');
DepLinker.copyDependenciesTo('./public/scripts')
// Done

Se você deseja uma solução rápida e fácil (e você tem o gulp instalado).

No meu, gulpfile.jseu executo uma tarefa simples de copiar e colar que coloca todos os arquivos que eu possa precisar no ./public/modules/diretório

gulp.task('modules', function() {
    sources = [
      './node_modules/prismjs/prism.js',
      './node_modules/prismjs/themes/prism-dark.css',
    ]
    gulp.src( sources ).pipe(gulp.dest('./public/modules/'));
});

gulp.task('copy-modules', ['modules']);

A desvantagem disso é que não é automatizado. No entanto, se tudo o que você precisa é de alguns scripts e estilos copiados (e mantidos em uma lista), isso deve funcionar.

O diretório 'node_modules' pode não estar no diretório atual, portanto, você deve resolver o caminho dinamicamente.

var bootstrap_dir = require.resolve('bootstrap')
                           .match(/.*\/node_modules\/[^/]+\//)[0];
app.use('/scripts', express.static(bootstrap_dir + 'dist/'));

Quero atualizar esta pergunta com uma solução mais fácil. Crie um link simbólico para node_modules.

A maneira mais fácil de conceder acesso público ao node_modules é criar um link simbólico apontando para o node_modules de dentro do diretório público. O link simbólico fará com que os arquivos existam onde quer que o link seja criado.

Por exemplo, se o servidor do nó tiver código para veicular arquivos estáticos

app.use(serveStatic(path.join(__dirname, 'dist')));

e __dirname refere-se a / path / to / app para que seus arquivos estáticos sejam servidos em / path / to / app / dist

e node_modules estiver em / path / to / app / node_modules, crie um link simbólico como este no mac / linux:

ln -s /path/to/app/node_modules /path/to/app/dist/node_modules

ou assim no windows:

mklink /path/to/app/node_modules /path/to/app/dist/node_modules

Agora, um pedido de obtenção para:

node_modules/some/path 

receberá uma resposta com o arquivo em

/path/to/app/dist/node_modules/some/path 

que é realmente o arquivo em

/path/to/app/node_modules/some/path

Se seu diretório em / path / to / app / dist não for um local seguro, talvez por causa da interferência de um processo de compilação com gulp ou grunt, você poderá adicionar um diretório separado para o link e adicionar uma nova chamada serveStatic, como:

ln -s /path/to/app/node_modules /path/to/app/newDirectoryName/node_modules

e no nó adicione:

app.use(serveStatic(path.join(__dirname, 'newDirectoryName')));

Não encontrei nenhuma solução limpa (não quero expor a fonte de todos os meus node_modules), então acabei de escrever um script do Powershell para copiá-las:

$deps = "leaflet", "leaflet-search", "material-components-web"

foreach ($dep in $deps) {
    Copy-Item "node_modules/$dep/dist" "static/$dep" -Recurse
}

Fiz as alterações abaixo para incluir automaticamente os arquivos no índice html. Para que quando você adicionar um arquivo à pasta, ele será automaticamente retirado da pasta, sem que você precise incluir o arquivo em index.html

//// THIS WORKS FOR ME 
///// in app.js or server.js

var app = express();

app.use("/", express.static(__dirname));
var fs = require("fs"),

function getFiles (dir, files_){
    files_ = files_ || [];
    var files = fs.readdirSync(dir);
    for (var i in files){
        var name = dir + '/' + files[i];
        if (fs.statSync(name).isDirectory()){
            getFiles(name, files_);
        } else {
            files_.push(name);
        }
    }
    return files_;
}
//// send the files in js folder as variable/array 
ejs = require('ejs');

res.render('index', {
    'something':'something'...........
    jsfiles: jsfiles,
});

///--------------------------------------------------

///////// in views/index.ejs --- the below code will list the files in index.ejs

<% for(var i=0; i < jsfiles.length; i++) { %>
   <script src="<%= jsfiles[i] %>"></script>
<% } %>

Isto é o que eu configurei no meu expressservidor:

// app.js
const path = require('path');
const express = require('express');
const expressApp  = express();
const nm_dependencies = ['bootstrap', 'jquery', 'popper.js']; // keep adding required node_modules to this array.
nm_dependencies.forEach(dep => {
  expressApp.use(`/${dep}`, express.static(path.resolve(`node_modules/${dep}`)));
});

<!-- somewhere inside head tag -->
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />

<!-- somewhere near ending body tag -->
<script src="jquery/dist/jquery.js" charset="utf-8"></script>
<script src="popper.js/dist/popper.js" charset="utf-8"></script>
<script src="bootstrap/dist/js/bootstrap.js" charset="utf-8"></script>

Boa sorte...