Cara untuk memasukkan script yang terletak di dalam folder node_modules?

Saya punya pertanyaan mengenai praktek terbaik untuk termasuk node_modules ke HTML web.

Bayangkan saya telah Bootstrap di dalam node_modules folder. Sekarang untuk versi produksi dari website, bagaimana saya akan menyertakan skrip Bootstrap CSS dan file yang terletak di dalam node_modules folder? Tidak masuk akal untuk meninggalkan Bootstrap di dalam folder itu dan melakukan sesuatu seperti berikut ini?

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

Atau akan aku harus menambahkan aturan untuk saya tegukan file yang kemudian copy file-file tersebut ke folder dist? Atau akan menjadi yang terbaik untuk membiarkan tegukan entah bagaimana menghapus lokal bootstrap dari file HTML saya dan menggantinya dengan CDN versi?

Mengomentari pertanyaan (2)
Larutan

Biasanya, anda don't ingin mengekspos apapun internal anda jalan untuk bagaimana server anda terstruktur dengan dunia luar. Apa yang anda dapat adalah membuat /script rute statis di server anda yang mengambil file dari apapun direktori mereka kebetulan berada di. Jadi, jika file anda yang di "./node_modules/bootstrap/dist/". Kemudian, tag script di halaman anda hanya akan terlihat seperti ini:

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

Jika anda menggunakan express dengan nodejs, rute statis adalah yang sederhana seperti ini:

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

Kemudian, setiap browser permintaan dari /scripts/xxx.js otomatis akan diambil dari anda dist directory __dirname + /node_modules/bootstrap/dist/xxx.js.

Catatan: versi yang lebih Baru dari NPM menempatkan lebih banyak hal-hal di tingkat atas, tidak bersarang begitu mendalam sehingga jika anda menggunakan versi yang lebih baru dari NPM, maka nama jalan akan berbeda dari yang ditunjukkan dalam OP's pertanyaan dan jawaban saat ini. Tetapi, konsep ini masih sama. Anda mencari tahu di mana file-file tersebut secara fisik berada pada server anda mengemudi dan anda membuat sebuah aplikasi.menggunakan() dengan express.statis() untuk membuat pseudo-path ke file tersebut, jadi anda tidak't mengekspos sebenarnya server file sistem organisasi untuk klien.


Jika anda don't ingin membuat rute statis seperti ini, maka anda're mungkin lebih baik hanya menyalin semua script ke jalan yang server web anda tidak memperlakukan sebagai /script atau apapun tingkat atas penunjukan yang ingin anda gunakan. Biasanya, anda dapat membuat ini menyalin bagian dari membangun/proses penyebaran.


Jika anda ingin membuat hanya satu file tertentu umum di sebuah direktori dan tidak semuanya ditemukan dalam direktori tersebut dengan hal itu, maka anda dapat secara manual membuat rute individu untuk masing-masing file daripada menggunakan express.statis() seperti:

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

Dan kode untuk membuat rute untuk yang

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

Atau, jika anda ingin masih menggambarkan rute untuk script dengan /script, anda bisa melakukan hal ini:

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

Dan kode untuk membuat rute untuk yang

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

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

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

Seperti yang disebutkan oleh jfriend00 anda tidak harus mengekspos struktur server. Anda bisa copy proyek anda ketergantungan file untuk sesuatu seperti publik/script. Anda dapat melakukan ini sangat mudah dengan dep-linker seperti ini:

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

Direktori 'node_modules' tidak dapat di direktori saat ini, sehingga anda harus mengatasi jalan secara dinamis.

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

Jika anda ingin solusi yang cepat dan mudah (dan anda memiliki tegukan diinstal).

Saya gulpfile.js aku berjalan sederhana copy paste tugas yang menempatkan setiap file saya mungkin perlu ke ./umum/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 ini adalah bahwa hal itu isn't otomatis. Namun, jika semua yang anda butuhkan adalah beberapa script dan gaya disalin (dan disimpan dalam daftar), ini harus melakukan pekerjaan.

Komentar (1)

Saya ingin memperbarui pertanyaan ini dengan solusi yang lebih mudah. Buat symbolic link untuk node_modules.

Cara termudah untuk memberikan akses publik untuk node_modules adalah untuk membuat symbolic link yang menunjuk ke situs node_modules dari dalam direktori publik. Symlink akan membuat seolah-olah file yang ada di mana pun link yang dibuat.

Misalnya, jika node server memiliki kode untuk melayani file statis

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

dan __dirname mengacu /path/to/aplikasi sehingga anda file statis disajikan dari /path/to/aplikasi/dist

dan node_modules di /path/to/aplikasi/node_modules, kemudian membuat symlink seperti ini pada mac/linux:

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

atau seperti ini pada windows:

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

Sekarang mendapatkan permintaan untuk:

node_modules/some/path 

akan menerima respon dengan file di

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

yang benar-benar file di

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

Jika anda di direktori /path/to/aplikasi/dist tidak lokasi yang aman, mungkin karena gangguan dari proses membangun dengan gulp atau mendengus, kemudian anda bisa menambahkan direktori terpisah untuk link dan menambahkan yang baru namun panggilan seperti:

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

dan di node tambahkan:

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

Aku't menemukan bersih solusi (I don't ingin mengekspos sumber dari semua saya node_modules) jadi saya hanya menulis script Powershell untuk menyalin mereka:

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

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

Yang saya lakukan di bawah ini perubahan untuk AUTO-TERMASUK file index html. Sehingga ketika anda menambahkan file dalam folder ini secara otomatis akan mengambil dari folder, tanpa anda harus menyertakan file di 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


   <script src=""></script>
Komentar (0)

Ini adalah apa yang saya setup pada saya express server:

// 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}`)));
});





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

Good Luck...

Komentar (0)