ব্রাউজার ডিবাগিংয়ের অনুমতি দেওয়ার জন্য ওয়েবপ্যাকটি কনফিগার করুন

130

আমি ওয়েবপ্যাকে নতুন এবং আমি এটি ব্যবহার করতে একটি বিদ্যমান ওয়েব অ্যাপ্লিকেশন রূপান্তর করছি।

আমি আমার জেএস বান্ডিল এবং মিনিফাইনে ওয়েবপ্যাকটি ব্যবহার করছি যা মোতায়েনের সময় দুর্দান্ত, তবে এটি বিকাশকালে ডিবাগ করা খুব চ্যালেঞ্জক করে তোলে।

সাধারণত আমি জেএস সমস্যাগুলি ডিবাগ করতে ক্রোমের অন্তর্নির্মিত ডিবাগারটি ব্যবহার করি। (অথবা ফায়ারফক্সে ফায়ারব্যাগ)। তবে ওয়েবপ্যাকের সাহায্যে সমস্ত কিছুই একটি ফাইলে স্টাফ হয় এবং সেই প্রক্রিয়াটি ব্যবহার করে ডিবাগ করা চ্যালেঞ্জ হয়ে যায়।

দ্রুত বান্ডিলিং চালু এবং বন্ধ করার কোনও উপায় আছে কি? বা মিনিফাইং চালু এবং বন্ধ?

আমি এখানে কিছু স্ক্রিপ্ট লোডার কনফিগারেশন বা অন্য সেটিং আছে কিনা তা দেখতে চেয়েছি তবে এটি স্পষ্ট দেখা যায় না।

মডিউল এবং ব্যবহারের প্রয়োজনের মতো কাজ করতে সবকিছুকে রূপান্তর করার এখনও আমার এখনও সময় হয়নি। সুতরাং আমি কেবল আমার লোডিংয়ের জন্য প্রয়োজনীয় ("স্ক্রিপ্ট!। / ফাইল.js") প্যাটার্নটি ব্যবহার করি।

javascript webpack

— জিম
সূত্র

3

আপনি কি এই সমস্যার সমাধান খুঁজে পেয়েছেন? আমি উপলব্ধ ভেরিয়েবলগুলি দেখতে জেএস কনসোলটি ব্যবহার করতে পছন্দ করি। আমার মূল সমস্যাটি হ'ল ওয়েবপ্যাকটি মডিউলটির মধ্যে এই সমস্ত ভেরিয়েবলগুলি লুকিয়ে রাখে তাই সেগুলি অ্যাক্সেসযোগ্য হয়ে যায়

— user1496984

2

সত্যই কখনও কোনও সমাধান খুঁজে পাওয়া যায় নি তাই দুর্ভাগ্যক্রমে ওয়েবপ্যাক ব্যবহার করে বাতিল করে দেওয়া হয়েছে।

— জিম

আপনি এখন কি ব্যবহার করবেন? ওয়েবপ্যাক লেখার সময় এখনও সন্ধান করা সর্বাধিক জনপ্রিয় বিল্ড সরঞ্জামের মতো মনে হয়।

— রিচার্ড

100

আপনি আপনার সোর্স কোড এবং বান্ডেলড / মিনিফাইডের মধ্যে থাকা ম্যাপিংটিকে সংরক্ষণ করতে উত্স মানচিত্র ব্যবহার করতে পারেন ।

Webpack উপলব্ধ devtool শুধু আপনার জন্য একত্রিত ফাইল একটি উৎস মানচিত্র তৈরি করার ডেভেলপার সরঞ্জামে ডিবাগ উন্নত বিকল্প। এই বিকল্পটি কমান্ড লাইন থেকে ব্যবহার করা যেতে পারে বা আপনার ওয়েবপ্যাক . config.js কনফিগারেশন ফাইলে ব্যবহার করা যেতে পারে ।

নীচে আপনি উত্পন্ন উত্স মানচিত্র ফাইল ( bundle.js.map ) বান্ডিল ফাইল ( bundle.js ) জেনারেট করতে কমান্ড লাইন ব্যবহার করে একটি স্বতন্ত্র উদাহরণ খুঁজে পেতে পারেন ।

$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.74 kB       0  [emitted]  main
bundle.js.map  1.89 kB       0  [emitted]  main
   [0] ./entry.js 85 bytes {0} [built]
   [1] ./hello.js 59 bytes {0} [built]

index.html

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

entry.js

var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();

hello.js

module.exports = function () {
  return 'Hello world!';
};

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

এবং হ্যাঁ, আপনি ডিবাগিং শুরু করতে পারেন যেন আপনার মূল উত্স কোডটি রয়েছে! এক লাইনে ব্রেকপয়েন্ট রাখার চেষ্টা করুন এবং পৃষ্ঠাটি রিফ্রেশ করুন।

— dreyescat
সূত্র

2

bundle.map জেএস ফাইলের দিকে ইঙ্গিত করে তবে প্রকৃত জেএস ফাইলটিতে tsx বা ts বলতে কোনও মানচিত্র থাকলে কী হবে?

— আন্দ্রেজ কোভাকিক

4

প্রোডাকশন এবং ডেভলপমেন্ট মোড ব্যবহার করে আপনার প্রজেক্ট সেটআপ করা ভাল বলে আমি মনে করি https://webpack.js.org/guides/pr Prod// এতে আপনার কোডটি ডিবাগে কীভাবে ম্যাপ করা যায় তা অন্তর্ভুক্ত রয়েছে

devtool: 'inline-source-map'

— M-ফারহান
সূত্র

3

ইতিমধ্যে চিহ্নিত হিসাবে উত্স মানচিত্র খুব দরকারী।
তবে কখনও কখনও কোন উত্স মানচিত্রটি ব্যবহার করবেন তা নির্বাচন করা ব্যথা হতে পারে।

ওয়েবপ্যাক উত্স মানচিত্র ইস্যুগুলির একটিতে এই মন্তব্যটি প্রয়োজনীয়তার উপর ভিত্তি করে কোন উত্স মানচিত্রটি ব্যবহার করতে হবে তা নির্বাচন করার জন্য সহায়ক হতে পারে।

— অভিনব সিঙ্গি
সূত্র

1

এখানে দেখুন

এটি জাভাস্ক্রিপ্টকে নির্ধারণ করে এমন একটি বিউটিফায়ার। নীচে, এটিতে ব্রাউজারগুলির জন্য বিভিন্ন প্লাগইন এবং এক্সটেনশনের একটি তালিকা রয়েছে, সেগুলি দেখুন।

আপনি ফায়ারফক্স ডেমিনিফায়ার সম্পর্কে আগ্রহী হতে পারেন , এটি সার্ভার থেকে পুনরুদ্ধার করার পরে আপনার জাভাস্ক্রিপ্টটিকে নির্ধারণ করা এবং স্টাইল করার কথা।

এখানে চিত্র বর্ণনা লিখুন

— কলা
সূত্র

10

ডাইমিনিফাইং মিনিফাইং নিষ্ক্রিয় করার মতো নয় কারণ মন্তব্যগুলি এখনও ছাঁটাই করা হয়, লাইন নম্বর আর মেলে না এবং পরিবর্তনশীল নাম একই হয় না। এটা বলা ভাল যে কিছুই ভাল তারপর।

— জিম

1

ডিবাগারটিতে ক্রোমেরও একটি ফর্ম্যাট বিকল্প রয়েছে। এটিতে একটি সাধারণ উত্স ফাইল যাবতীয় তথ্য নেই তবে এটি দুর্দান্ত শুরু, আপনি ব্রেকপয়েন্টগুলিও সেট করতে পারেন। আপনি যে বোতামটি ক্লিক করেন তা প্রথম স্ক্রিন শটটির নীচে বাম দিকে, looks like এর মতো দেখাচ্ছে}

বিন্যাস করার আগে:

ফর্ম্যাট করার পরে

— Jolly1234
সূত্র