Bagaimana cara memasukkan skrip yang terletak di dalam folder node_modules?

Saya punya pertanyaan tentang praktik terbaik untuk node_modulesdimasukkan ke situs web HTML.

Bayangkan saya memiliki Bootstrap di dalam node_modulesfolder saya . Sekarang untuk versi produksi situs web, bagaimana saya akan memasukkan skrip Bootstrap dan file CSS yang terletak di dalam node_modulesfolder? Apakah masuk akal untuk meninggalkan Bootstrap di dalam folder itu dan melakukan sesuatu seperti yang berikut ini?

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

Atau apakah saya harus menambahkan aturan ke file teguk saya yang kemudian menyalin file-file itu ke folder dist saya? Atau apakah lebih baik membiarkan tegukan entah bagaimana menghapus sepenuhnya bootstrap lokal dari file HTML saya dan menggantinya dengan versi CDN?

Biasanya, Anda tidak ingin mengekspos salah satu jalur internal Anda untuk bagaimana server Anda disusun ke dunia luar. Apa yang Anda dapat adalah membuat /scriptsrute statis di server Anda yang mengambil file dari direktori apa pun yang mereka kebetulan tinggal di. Jadi, jika file Anda di "./node_modules/bootstrap/dist/". Kemudian, tag skrip di halaman Anda terlihat seperti ini:

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

Jika Anda menggunakan express dengan nodejs, rute statis semudah ini:

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

Kemudian, permintaan browser apa pun dari /scripts/xxx.jssecara otomatis akan diambil dari distdirektori Anda di __dirname + /node_modules/bootstrap/dist/xxx.js.

Catatan: Versi NPM yang lebih baru menempatkan lebih banyak hal di level atas, tidak bersarang terlalu dalam sehingga jika Anda menggunakan versi NPM yang lebih baru, maka nama jalur akan berbeda dari yang ditunjukkan dalam pertanyaan OP dan dalam jawaban saat ini. Tapi, konsepnya masih sama. Anda mencari tahu di mana file-file secara fisik terletak di drive server Anda dan Anda membuat app.use()dengan express.static()untuk membuat pseudo-path ke file-file itu sehingga Anda tidak mengekspos organisasi sistem file server yang sebenarnya kepada klien.

Jika Anda tidak ingin membuat rute statis seperti ini, maka Anda mungkin lebih baik hanya menyalin skrip publik ke jalur yang diperlakukan oleh server web Anda sebagai /scriptsatau sebutan tingkat atas apa pun yang ingin Anda gunakan. Biasanya, Anda dapat menjadikan salinan ini sebagai bagian dari proses build / deployment Anda.

Jika Anda ingin membuat hanya satu file tertentu publik dalam direktori dan tidak semua yang ditemukan dalam direktori itu, maka Anda dapat secara manual membuat rute individual untuk setiap file daripada menggunakan express.static()seperti:

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

Dan kode untuk membuat rute untuk itu

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

Atau, jika Anda masih ingin menggambarkan rute untuk skrip /scripts, Anda dapat melakukan ini:

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

Dan kode untuk membuat rute untuk itu

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

Saya akan menggunakan modul path npm dan kemudian melakukan sesuatu seperti ini:

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

PENTING: kami menggunakan path.join untuk membuat lintasan bergabung menggunakan cara agnostik sistem, yaitu pada windows dan unix kami memiliki pemisah jalur yang berbeda (/ dan)

Seperti yang disebutkan oleh jfriend00 Anda tidak boleh mengekspos struktur server Anda. Anda dapat menyalin file ketergantungan proyek Anda ke sesuatu seperti public/scripts. Anda dapat melakukan ini dengan sangat mudah dengan dep-linker seperti ini:

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

Jika Anda menginginkan solusi yang cepat dan mudah (dan Anda telah menelannya).

Dalam saya, gulpfile.jssaya menjalankan tugas copy paste sederhana yang menempatkan file apa pun yang saya butuhkan ke ./public/modules/direktori.

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']);

Kelemahan dari ini adalah tidak otomatis. Namun, jika yang Anda butuhkan hanyalah beberapa skrip dan gaya yang disalin (dan disimpan dalam daftar), ini harusnya berhasil.

Direktori 'node_modules' mungkin tidak ada di direktori saat ini, jadi Anda harus menyelesaikan jalur secara dinamis.

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

Saya ingin memperbarui pertanyaan ini dengan solusi yang lebih mudah. Buat tautan simbolis ke node_modules.

Cara termudah untuk memberikan akses publik ke node_modules adalah dengan membuat tautan simbolis yang menunjuk ke node_modules Anda dari dalam direktori publik Anda. Symlink akan membuatnya seolah-olah file ada di mana pun tautan dibuat.

Misalnya, jika server simpul memiliki kode untuk menyajikan file statis

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

dan __dirname merujuk ke / path / ke / app sehingga file statis Anda dilayani dari / path / ke / app / dist

dan node_modules ada di / path / ke / app / node_modules, lalu buat symlink seperti ini di mac / linux:

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

atau seperti ini di windows:

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

Sekarang dapatkan permintaan untuk:

node_modules/some/path 

akan menerima respons dengan file di

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

yang benar-benar file di

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

Jika direktori Anda di / path / ke / app / dist bukanlah lokasi yang aman, mungkin karena gangguan dari proses build dengan tegukan atau gerutuan, maka Anda bisa menambahkan direktori terpisah untuk tautan dan menambahkan panggilan serveStatic baru seperti:

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

dan di simpul tambahkan:

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

Saya tidak menemukan solusi bersih (saya tidak ingin mengekspos sumber semua node_modules saya) jadi saya hanya menulis skrip Powershell untuk menyalinnya:

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

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

Saya melakukan perubahan di bawah untuk AUTO-INCLUDE file dalam indeks html. Sehingga ketika Anda menambahkan file dalam folder itu akan secara otomatis diambil dari folder, tanpa Anda harus memasukkan file dalam 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>
<% } %>

Ini yang saya siapkan di expressserver saya :

// 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>

Semoga berhasil...