নোড_মডিউল ফোল্ডারের ভিতরে থাকা স্ক্রিপ্টগুলি কীভাবে অন্তর্ভুক্ত করবেন?

Question

node_modulesএইচটিএমএল ওয়েবসাইটে অন্তর্ভুক্ত করার জন্য আমার সেরা অনুশীলন সম্পর্কিত একটি প্রশ্ন রয়েছে ।

আমার node_modulesফোল্ডারের ভিতরে আমার বুটস্ট্র্যাপ আছে তা কল্পনা করুন । ওয়েবসাইটটির প্রোডাকশন সংস্করণের জন্য, আমি node_modulesফোল্ডারের ভিতরে থাকা বুটস্ট্র্যাপ স্ক্রিপ্ট এবং সিএসএস ফাইলগুলি কীভাবে অন্তর্ভুক্ত করব ? Folder ফোল্ডারটির ভিতরে বুটস্ট্র্যাপ ছেড়ে দেওয়া এবং নীচের মতো কিছু করা কি বোধগম্য?

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

বা আমার গল্প ফাইলে নিয়ম যুক্ত করতে হবে যা আমার ডিস্ট ফোল্ডারে সেই ফাইলগুলি অনুলিপি করবে? অথবা আমার এইচটিএমএল ফাইল থেকে স্থানীয় বুটস্ট্র্যাপটি সম্পূর্ণরূপে সরিয়ে দেওয়া এবং এটি সিডিএন সংস্করণ দিয়ে প্রতিস্থাপন করা ভাল কি হবে?

Comments

সম্পর্কিত বিষয় স্ট্যাকওভারফ্লো . com/ প্রশ্ন / 24397379/… । কোয়েস্টিনো @ পলক ভনসালীকে কেবলমাত্র প্রয়োজন মনে করে, এটি কেবলমাত্র এই প্রয়োজনের জন্য এই ক্ষমতা প্রয়োগের ন্যায্যতা প্রমাণ করে যেমন উদাহরণস্বরূপ একটি গল্প এক্সপ্রেস অ্যাপ্লিকেশন সরাসরি এনপিএম থেকে বুটস্ট্র্যাপ ইনস্টল করছে না, নল_মডিউলগুলিতে থাকা ফাইলগুলিতে এখন অ্যাক্সেসের প্রয়োজন আছে। এই একমাত্র উদ্দেশ্যে এখন এটি প্রয়োজনের জন্য একক ব্যবহারের কেসকে ন্যায়সঙ্গত করে? সমস্যাটি চলেছে im আমি ইতিমধ্যে সুরকার, এনপিএম, গাল্প, গ্রান্ট ব্যবহার করি না, ব্যক্তিগতভাবে বোভার চাই না এবং এই অ্যাপ্লিকেশনটিতে গ্রান্টও চাই না।

— ব্লেব

একটি স্বজ্ঞাত সমাধানের জন্য দুর্দান্ত প্রশ্ন!

— সিডওয়েল

Answer 1

আপনার সার্ভারটি কীভাবে বাইরের বিশ্বে স্ট্রাকচারিত হয় তার জন্য আপনি কোনও অভ্যন্তরীণ পথ প্রকাশ করতে চান না। আপনি যা করতে পারেন তা হ'ল /scriptsআপনার সার্ভারে একটি স্থিতিশীল রুট যা সেগুলির ফাইলগুলি যে কোনও ডিরেক্টরিতে থাকতে সেগুলি থেকে এনে দেয় So সুতরাং, যদি আপনার ফাইলগুলি থাকে "./node_modules/bootstrap/dist/"। তারপরে, আপনার পৃষ্ঠাগুলিতে স্ক্রিপ্ট ট্যাগটি ঠিক এর মতো দেখায়:

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

আপনি যদি নোডেজের সাহায্যে এক্সপ্রেস ব্যবহার করছিলেন তবে একটি স্থিতিশীল রুট এটির মতো সহজ:

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

তারপরে, যে কোনও ব্রাউজারের অনুরোধগুলি /scripts/xxx.jsআপনার distডিরেক্টরি থেকে স্বয়ংক্রিয়ভাবে এনে দেওয়া হবে __dirname + /node_modules/bootstrap/dist/xxx.js।

দ্রষ্টব্য: এনপিএমের নতুন সংস্করণগুলি শীর্ষ স্তরে আরও বেশি জিনিস রাখে, এত গভীরভাবে বাসা বাঁধে না তাই আপনি যদি এনপিএমের একটি নতুন সংস্করণ ব্যবহার করেন তবে পাথের নামগুলি ওপি-র প্রশ্নের এবং বর্তমান উত্তরে বর্ণিত চেয়ে আলাদা হবে। তবে, ধারণাটি এখনও একইরকম। আপনি খুঁজে বের যেখানে ফাইল শারীরিকভাবে আপনার সার্ভারে ড্রাইভে অবস্থিত হয় এবং আপনি একটি করতে app.use()সঙ্গে express.static()যাতে আপনি ক্লায়েন্টের সাথে প্রকৃত সার্ভার ফাইল সিস্টেম সংগঠন প্রকাশক নেই ঐ ফাইল করার জন্য একটি সিউডো-পাথ করা।

---

আপনি যদি এটির মতো কোনও স্থিতিশীল রুট তৈরি করতে না চান তবে আপনি সম্ভবত আপনার পাবলিক স্ক্রিপ্টগুলি এমন কোনও পথে অনুলিপি করা ভাল যা আপনার ওয়েব সার্ভারটি /scriptsব্যবহার করতে চান বা যে কোনও শীর্ষ স্তরের পদবি হিসাবে ব্যবহার করে। সাধারণত, আপনি এই অনুলিপিটি আপনার বিল্ড / স্থাপনার প্রক্রিয়াটির অংশ করতে পারেন।

---

আপনি যদি কোনও ডিরেক্টরিতে কেবল একটি নির্দিষ্ট ফাইলই সর্বজনীন করতে চান এবং সেই ডিরেক্টরিতে পাওয়া সমস্ত কিছুই না পাওয়া যায় তবে আপনি নিজে প্রতিটি ফাইলের জন্য পৃথক রুটগুলি তৈরি করতে পারবেন express.static()যেমন:

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

এবং কোড এটির জন্য একটি রুট তৈরি করতে

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

অথবা, আপনি যদি এখনও স্ক্রিপ্টগুলির সাথে রুটগুলি চিত্রিত করতে চান তবে আপনি এটি করতে পারেন /scripts:

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

এবং কোড এটির জন্য একটি রুট তৈরি করতে

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

Comments

আমার কী সেগুলি ম্যানুয়ালি অনুলিপি করা দরকার বা এটি করার কোনও গ্রান্ট উপায় আছে? আমি মনে করি বুটস্ট্র্যাপ ফোল্ডারটি সম্পূর্ণরূপে অনুলিপি করা ভাল হবে /scriptsকারণ মডিউলটির অভ্যন্তরে কোনও নির্ভরতা বজায় থাকবে।

— ক্রিস

@phpheini - সম্ভবত এই সহায়তা করবে: stackoverflow.com/questions/18966485/... এবং এই npmjs.com/package/grunt-copy

— jfriend00

@ রবার্টঅশলার - না, এটি ডুপসের জন্য পরীক্ষা করে না। express.static()এটি খুঁজে পাওয়া প্রথম ম্যাচ প্রেরণ করে। যেহেতু প্রতিটি express.static()বিবৃতি কেবল একটি সম্ভাব্য মিলে যাওয়ার পথ তৈরি করে, তাই কোনও express.static()বিবৃতি থেকে সদৃশ হওয়া উচিত নয় । আপনার যদি একাধিক express.static()বক্তব্য থাকে যে প্রত্যেকেরই একটির মিল থাকতে পারে তবে আপনার কোডের প্রথমটি হ'ল যার ম্যাচটি ব্যবহৃত হবে। এছাড়াও, আপনার কাছে একই নাম এবং আপেক্ষিক পথের সাথে express.static()বিবৃতি দিয়ে পৌঁছানোর মতো একাধিক ফাইল থাকা উচিত নয় । সেরা অনুশীলন এটি না করা হয়।

— jਫਰ00

@ রবার্টঅশলার - আপনি কী নিয়ন্ত্রণহীন অ্যাক্সেস সরবরাহ করেন সে সম্পর্কে আপনাকে খুব সতর্কতা অবলম্বন করতে হবে। সাধারণভাবে, আপনার express.static()কেবলমাত্র সেই ডিরেক্টরিতে নির্দেশ করা উচিত যা কেবলমাত্র পাবলিক ফাইল রয়েছে (উপ-ডিরেক্টরি অন্তর্ভুক্ত)। সুতরাং, আমি সত্যিই এমন কোনও প্রকল্পের কল্পনা করতে পারি না যেখানে প্রচুর distডিরেক্টরি প্রকাশিত হয়েছিল। এটা আমার কাছে খুব অস্বাভাবিক মনে হয়। সম্ভবত আপনি একটি নির্দিষ্ট ফাইলের জন্য বা ৩-৩ টি ফাইলের জন্য একটি নির্দিষ্ট রুট তৈরি করতে চান। সেক্ষেত্রে আপনি এই ফাইলগুলিকে নিস্পষ্ট করার জন্য দায়বদ্ধ। script.jsযাইহোক চারটি ফাইল রাখলে এটি আপনার কোনও ভাল কাজ করে না।

— jਫਰ00

@ রবার্টঅশলার - আপনি যদি মিলের জন্য তাদের সামনে কোনও অনন্য পথের প্রয়োজন না তৈরি করেন /script.jsতবে ব্রাউজারের দ্বারা অনুরোধ করা হলে কোন কোডটি পরিবেশন করতে হবে তা জানার কোনও উপায় নেই । সুতরাং, বিমূর্ত উত্তরটি হ'ল ডুপ্লিকেট ফাইলনামগুলির পরিস্থিতি আপনার উপস্থিতির অনুমতি দেওয়া উচিত নয় কারণ এটি সমাধানযোগ্য সমস্যা নয় যতক্ষণ না আপনার ফাইলগুলির প্রতিটি ডিরেক্টরিগুলির জন্য একটি অনন্য উপসর্গ প্রয়োজন। তারপরে, সদৃশ মূল নামগুলি যে কোনওভাবেই সমস্যা নয়। বিস্তারিত সুপারিশ সহ আরও সুনির্দিষ্ট উত্তরের জন্য আপনাকে সঠিক বিবরণ সহ আপনার নিজের প্রশ্ন পোস্ট করতে হবে।

— jਫਰ00

Answer 2

আমি পাথ এনএমপি মডিউলটি ব্যবহার করব এবং তারপরে এই জাতীয় কিছু করব:

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

গুরুত্বপূর্ণ: আমরা সিস্টেমে অজগনীয় উপায়ে ব্যবহার করে পাথ তৈরি করতে path.join ব্যবহার করি, যেমন উইন্ডো এবং ইউনিক্সে আমাদের পৃথক পাথ বিভাজক (/ এবং) রয়েছে

Comments

উপরের মতো সদৃশ চিহ্নিত করুন, পাথ.জাইন কেবলমাত্র একটি অতিরিক্ত পরিমাপ, তবে নোড_মডিউলস ডিয়ারে একটি স্ট্যাটিক পাথ যুক্ত করে একই সমাধান।

— ব্লেম

"পথ.জোঁইন কেবল একটি অতিরিক্ত পরিমাপ, তবে এখনও একই সমাধান" একই সমাধান নয়। কঠোরভাবে বলতে গেলে এটি সিস্টেম নির্দিষ্ট যোগদান (উইন্ডোজ এবং ইউনিক্সে মনে রাখবেন / এবং \ বিভাজক) মনে রাখবেন

— আলেকজান্ডার এগোরভ

ঠিক আছে, আমি আপনার বক্তব্যটি দেখতে পাচ্ছি, হ্যাঁ সিস্টেম অজ্ঞায়নের জন্য এটি সর্বদা ভাল, আমি সচেতন ছিলাম না এটিই ছিল। যে ইশারা জন্য ধন্যবাদ। আপনার উত্তরটিতে বাক্যে এটি যুক্ত করা বুদ্ধিমানের কাজ হবে, কেবল কোড সরবরাহ করার পরিবর্তে :-), যেমন আপনার কোডটি ব্যাখ্যা করুন।

— ব্লেব

Answer 3

Jfriend00 দ্বারা উল্লিখিত হিসাবে আপনি আপনার সার্ভার কাঠামো প্রকাশ করা উচিত নয়। আপনি আপনার প্রকল্প নির্ভরতা ফাইলগুলি এমন কোনও কিছুতে অনুলিপি করতে পারেন public/scripts। আপনি এর মতো ডিপ-লিংক দিয়ে খুব সহজেই এটি করতে পারেন :

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

Comments

স্ক্রিপ্ট srcগুলি এর পরে কিছু হবে /scripts/[package-name]/dist/file.min.js।

— জ্যাকব ফোর্ড

Answer 4

আপনি যদি একটি দ্রুত এবং সহজ সমাধান চান (এবং আপনি গল্প ইনস্টল করেছেন)।

আমার gulpfile.jsআমি একটি সাধারণ অনুলিপি পেস্ট টাস্ক চালাচ্ছি যা আমার প্রয়োজন মতো কোনও ফাইল ./public/modules/ডিরেক্টরিতে রেখে দেয়।

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

এর নেতিবাচক দিকটি এটি স্বয়ংক্রিয় নয়। তবে, আপনার যা যা দরকার তা হ'ল কয়েকটি স্ক্রিপ্ট এবং শৈলী অনুলিপি করা (এবং একটি তালিকায় রাখা হয়েছে), এটি কাজটি করা উচিত।

Comments

স্ক্রিপ্টগুলিতে কেউ তাদের প্যাকেজ.জসনে এটি যুক্ত করতে পারে 'scripts': {'install':'yarn gulp copy-modules'} , ধরে যে সুতাটি প্যাকেজ ম্যানেজার এবং প্যাকেজে ইনস্টল করা আছে।

— টড

Answer 5

ডিরেক্টরি 'নোড_মডিউলস' বর্তমান ডিরেক্টরিতে নাও থাকতে পারে, তাই আপনার গতিশীল দিকটি সমাধান করা উচিত।

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

Comments

+1, যদিও আমি মনে করি না এটি সব ক্ষেত্রেই কাজ করবে - ইগান এনপিএম লিঙ্কযুক্ত মডিউল যা কোনও নোড_মডিউল সাবফোল্ডারে নেই

— আলাসডায়ার

Answer 6

একটি সহজ সমাধান সহ আমি এই প্রশ্নটি আপডেট করতে চাই। নোড_মডিউলগুলিতে একটি প্রতীকী লিঙ্ক তৈরি করুন।

নোড_মডিউলগুলিতে সর্বসাধারণের অ্যাক্সেস দেওয়ার সহজতম উপায় হ'ল আপনার পাবলিক ডিরেক্টরিতে আপনার নোড_মডিউলগুলিকে নির্দেশ করে একটি প্রতীকী লিঙ্ক তৈরি করা। এই লিঙ্কটি যেখানেই তৈরি করা হয়েছে সেখানে ফাইলগুলি বিদ্যমান থাকলে সিমলিংকটি এটি তৈরি করবে।

উদাহরণস্বরূপ, যদি নোড সার্ভারের স্ট্যাটিক ফাইলগুলি পরিবেশন করার কোড থাকে

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

এবং __ ডিরেক্টরিটি / পথ / থেকে / অ্যাপ্লিকেশনটিকে বোঝায় যাতে আপনার স্ট্যাটিক ফাইলগুলি / পাথ / থেকে / অ্যাপ্লিকেশন / ডিস্টের থেকে পরিবেশিত হয়

এবং নোড_মডিউলগুলি / পাথ / টু / অ্যাপ / নোড_মডিউলগুলিতে রয়েছে, তারপরে ম্যাক / লিনাক্সে এই জাতীয় একটি সিমিলিংক তৈরি করুন:

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

বা উইন্ডোতে এটি পছন্দ করুন:

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

এখন একটি অনুরোধ জন্য পেতে:

node_modules/some/path 

ফাইলটির সাথে একটি প্রতিক্রিয়া পাবেন

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

যা আসলে ফাইল হয়

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

যদি আপনার ডিরেক্টরিটি / পাথ / টু / অ্যাপ / ডিস্টে নিরাপদ অবস্থান না হয়, সম্ভবত গল্প বা গ্রান্টের সাথে বিল্ড প্রক্রিয়া থেকে হস্তক্ষেপের কারণে, তবে আপনি লিঙ্কটির জন্য একটি পৃথক ডিরেক্টরি যুক্ত করতে পারেন এবং একটি নতুন সার্ভস্ট্যাটিক কল যুক্ত করতে পারেন যেমন:

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

এবং নোডে যোগ করুন:

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

Comments

তবে তারপরে আপনি আপনার অ্যাপটিকে অন্য পথে সরিয়ে নিয়েছেন এবং সিমলিংকটি অবৈধ। অথবা আপনি আপনার অ্যাপ্লিকেশনটি অন্য কোনও মেশিনে (টেস্ট / প্রোড) চালাতে চান, আপনাকে এটি আবার তৈরি করতে হবে। আপনার অ্যাপ্লিকেশনটিতে যে কোনও অবদানকারীকে অবশ্যই এটি করতে হবে। এটি উপরের সমাধানগুলির তুলনায় কিছু রক্ষণাবেক্ষণ যোগ করে।

— mati.o

@ mati.o আপেক্ষিক প্রতীকী লিঙ্কগুলি সম্পর্কে কী? আমি এই সমাধানটি পছন্দ করি তবে কেবল আপেক্ষিক সিমলিংক সহ।

— লুকা বেদনায়েক

Answer 7

আমি কোনও পরিষ্কার সমাধান পাইনি (আমি আমার সমস্ত নোড_মডিউলগুলির উত্সটি প্রকাশ করতে চাই না) তাই আমি তাদের অনুলিপি করার জন্য কেবল একটি পাওয়ারশেল স্ক্রিপ্ট লিখেছি:

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

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

Answer 8

আমি নীচে পরিবর্তনগুলি এইচটিএমএল সূচীতে ফাইলগুলি অন্তর্ভুক্ত করেছিলাম। যাতে আপনি যখন ফোল্ডারে কোনও ফাইল যুক্ত করেন তখন ফোল্ডারটি স্বয়ংক্রিয়ভাবে ফোল্ডার থেকে নেওয়া হবে, আপনাকে ফাইলটি সূচিপত্রের মধ্যে অন্তর্ভুক্ত না করে .h

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

Answer 9

এটি আমার expressসার্ভারে সেটআপ করেছি :

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

শুভকামনা ...