Cấu hình gói web để cho phép gỡ lỗi trình duyệt

130

Tôi chưa quen với webpack và tôi đang chuyển đổi một ứng dụng web hiện có để sử dụng nó.

Tôi đang sử dụng gói webpack để đóng gói và thu nhỏ JS của mình, điều này rất tuyệt khi được triển khai, tuy nhiên điều này khiến cho việc gỡ lỗi trong khi phát triển rất khó khăn.

Thông thường tôi sử dụng trình gỡ lỗi tích hợp của chrome để gỡ lỗi các vấn đề về JS. (Hoặc Firebird trên firefox). Tuy nhiên với webpack, mọi thứ được nhồi trong một tệp và việc gỡ lỗi bằng cơ chế đó trở nên khó khăn.

Có cách nào để nhanh chóng bật và tắt gói không? hoặc bật và tắt minifying?

Tôi đã xem xét nếu có một số cấu hình trình tải tập lệnh hoặc cài đặt khác nhưng nó không xuất hiện.

Tôi chưa có thời gian để chuyển đổi mọi thứ để hoạt động như một mô-đun và yêu cầu sử dụng. Vì vậy, tôi chỉ đơn giản sử dụng mẫu request ("script! ./ file.js") để tải.

javascript webpack

— Jim
nguồn

3

Bạn đã kết thúc việc tìm một giải pháp cho vấn đề này? Tôi cũng thích sử dụng bảng điều khiển JS để xem xét các biến có sẵn. Vấn đề chính của tôi là webpack ẩn tất cả các biến này trong mô-đun, do đó chúng không thể truy cập được

— user1496984

2

Không bao giờ thực sự tìm thấy một giải pháp vì vậy chúng tôi không may hủy bỏ bằng cách sử dụng webpack.

— Jim

Bạn dùng gì bây giờ? Tại thời điểm viết webpack vẫn có vẻ như là công cụ xây dựng phổ biến nhất mà tôi có thể tìm thấy.

— Richard

100

Bạn có thể sử dụng bản đồ nguồn để duy trì ánh xạ giữa mã nguồn của bạn và mã được gói / rút gọn.

Webpack cung cấp tùy chọn devtool để tăng cường gỡ lỗi trong công cụ dành cho nhà phát triển, chỉ cần tạo bản đồ nguồn của tệp được đóng gói cho bạn. Tùy chọn này có thể được sử dụng từ dòng lệnh hoặc được sử dụng trong tệp cấu hình webpack.config.js của bạn .

Dưới đây, bạn có thể tìm thấy một ví dụ giả định bằng cách sử dụng dòng lệnh để tạo tệp được đóng gói ( bundle.js ) cùng với tệp bản đồ nguồn được tạo ( 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();

xin chào

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

Nếu bạn mở index.html trong trình duyệt của mình (Tôi sử dụng Chrome nhưng tôi nghĩ nó cũng được hỗ trợ trong các trình duyệt khác), bạn sẽ thấy trong tab Nguồn mà bạn có tệp được đóng gói trong tệp: // lược đồ và các tệp nguồn bên dưới gói web đặc biệt : // lược đồ.

Và có, bạn có thể bắt đầu gỡ lỗi như thể bạn có mã nguồn gốc! Cố gắng đặt một điểm dừng trong một dòng và làm mới trang.

— mèo xám
nguồn

2

bundle.map trỏ đến tệp js nhưng nếu tệp js thực tế cũng có bản đồ để cho biết tsx hoặc ts thì sao?

— Andrej Kovacik

4

Tôi nghĩ sẽ tốt hơn khi thiết lập dự án của bạn bằng chế độ sản xuất và phát triển https://webpack.js.org/guides/production/ Nó cũng bao gồm cách ánh xạ mã của bạn để gỡ lỗi

devtool: 'inline-source-map'

— m-farhan
nguồn

3

Bản đồ nguồn rất hữu ích như đã chỉ ra.
Nhưng đôi khi chọn bản đồ nguồn để sử dụng có thể là một nỗi đau.

Nhận xét này về một trong những vấn đề về bản đồ nguồn Webpack có thể hữu ích cho việc chọn sử dụng bản đồ nguồn nào dựa trên các yêu cầu.

— Abhinav Singi
nguồn

1

Có một cái nhìn ở đây

nó là một công cụ làm đẹp khử trùng javascript. ở phía dưới, nó có một danh sách các plugin và tiện ích mở rộng khác nhau cho các trình duyệt, hãy kiểm tra chúng.

bạn có thể quan tâm đến FireFox Deminifier , nó được cho là sẽ khử và tạo kiểu javascript của bạn khi nó được lấy từ máy chủ.

nhập mô tả hình ảnh ở đây

— Trái chuối
nguồn

10

khử trùng không giống như vô hiệu hóa việc thu nhỏ vì các bình luận vẫn bị tước, số dòng không còn phù hợp và tên biến không giống nhau. Điều đó được nói là tốt hơn sau đó không có gì.

— Jim

1

Chrome cũng có một tùy chọn định dạng trong trình gỡ lỗi. Nó không có tất cả thông tin mà một tệp nguồn bình thường sẽ có nhưng đó là một khởi đầu tuyệt vời, bạn cũng có thể đặt các điểm dừng. Nút bạn nhấp nằm ở phía dưới bên trái của ảnh chụp màn hình đầu tiên, trông giống như {}.

Trước khi định dạng:

Sau khi định dạng.

— Jolly1234
nguồn