Налаштуйте веб-пакет, щоб дозволити налагодження браузера

130

Я новачок у webpack і перетворюю існуючий веб-додаток для його використання.

Я використовую webpack для згуртування та мінімізації мого JS, що чудово під час розгортання, однак це робить дуже складним налагодження під час розробки.

Зазвичай я використовую вбудований у налагоджувальник хрому для налагодження проблем JS. (Або Firebug на Firefox). Однак із вебпакетом все заповнено одним файлом, і налагоджувати за допомогою цього механізму стає складно.

Чи є спосіб швидкого включення та вимкнення бунделінгу? або вмикати та вимикати мінімізацію?

Я перевірив, чи є якась конфігурація завантажувача скриптів чи інша установка, але це не виглядає очевидним.

Я ще не встиг перетворити все, щоб діяти як модуль і вимагає використання. Тому я просто використовую шаблон ("script! ./ file.js") для завантаження.

javascript webpack

— Джим
джерело

3

Ви нарешті знайшли рішення цієї проблеми? Я також вважаю за краще використовувати консоль JS для перегляду доступних змінних. Моє головне питання полягає в тому, що webpack приховує всі ці змінні всередині модуля, тому вони стають недоступними

— user1496984

2

Ніколи насправді не знайшли рішення, тому ми, на жаль, перервали за допомогою webpack.

— Джим

Що ти зараз використовуєш? На момент написання веб-пакету все ще здається найпопулярнішим інструментом збирання, який я можу знайти.

— Річард

100

Ви можете використовувати вихідні карти, щоб зберегти відображення між вихідним кодом та пакетним / мінімізованим.

Webpack надає можливість devtool для покращення налагодження в інструменті розробника, просто створивши для вас вихідну карту зв'язаного файлу. Цей параметр можна використовувати з командного рядка або використовувати у файлі конфігурації webpack.config.js .

Нижче ви можете знайти надуманий приклад, використовуючи командний рядок для генерації файлу в комплекті ( bundle.js ) разом із створеним файлом вихідної карти ( bundle.js.map ).

$ 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!';
};

Якщо ви відкриєте index.html у своєму браузері (я використовую Chrome, але я думаю, що він підтримується і в інших браузерах), ви побачите на вкладці " Джерела", що у вас є пакет файлів під файлом: // схема та вихідні файли під спеціальний вебпакет: // схема.

І так, ви можете розпочати налагодження так, ніби у вас був вихідний вихідний код! Спробуйте поставити точку перерви в один рядок і оновити сторінку.

— dreyescat
джерело

2

bundle.map вказує на файл js, але що робити, якщо фактичний файл js також має карту, щоб сказати tsx чи ts?

— Андрій Ковачик

4

Я думаю, що краще налаштувати ваш проект, використовуючи режим виробництва та розробки https://webpack.js.org/guides/production/ Також він включає в себе спосіб відображення коду для налагодження

devtool: 'inline-source-map'

— м-фархан
джерело

3

Карти джерел дуже корисні, як уже зазначалося.
Але іноді вибір карти джерела використовувати може бути болем.

Цей коментар до однієї з проблем із вихідною картою Webpack може бути корисним для вибору, яку вихідну карту використовувати на основі вимог.

— Абхінав Сінгі
джерело

1

Подивіться тут

це красуня, яка деміфікує JavaScript. внизу він містить список різних плагінів та розширень для браузерів, ознайомтесь із ними.

вас може зацікавити FireFox Deminifier , який повинен демініфікувати та стилізувати ваш JavaScript, коли його буде отримано з сервера.

введіть тут опис зображення

— Банан
джерело

10

демініфікація - це не те саме, що вимкнути мінімізацію, оскільки коментарі все ще знімаються, номери рядків більше не збігаються, а назви змінних не збігаються. Коли говорити, то краще нічого.

— Джим

1

У Chrome також є параметр формату у відладчику. У ній немає всієї інформації, яку має звичайний вихідний файл, але це чудовий початок, також ви можете встановити точки прориву. Кнопка, яку ви натискаєте, знаходиться внизу зліва від першого знімка екрана, виглядає як {}.

Перед форматуванням:

Після форматування.

— Веселий1234
джерело