TL; DR Bài viết này là bài nói chuyện của tôi cho Buổi họp mặt Stockholm ReactJS mà tôi đã có gần đây. Bạn có thể kiểm tra các slide ở đây https. //www. trình chiếu. net/BohdanLiashenko/ast-for-javascript-developers
Tại sao cây cú pháp trừu tượng?
Nếu bạn kiểm tra devDependencies của bất kỳ dự án hiện đại nào, bạn sẽ thấy nó đã tăng bao nhiêu trong những năm qua. Chúng tôi thực sự có các nhóm công cụ ở đó. Chuyển mã JavaScript, thu nhỏ mã, bộ xử lý trước CSS, eslint, đẹp hơn, v.v. Đây là các mô-đun JavaScript mà chúng tôi không đưa vào sản xuất, nhưng chúng đóng một vai trò rất quan trọng trong quá trình phát triển của chúng tôi. Tất cả các công cụ này, bằng cách này hay cách khác, được xây dựng dựa trên quá trình xử lý AST
Tất cả các công cụ này, bằng cách này hay cách khác, được xây dựng dựa trên quá trình xử lý AST
Có một kế hoạch những gì tôi sẽ nói về. Chúng tôi đang bắt đầu từ AST là gì và cách xây dựng nó từ mã đơn giản. Sau đó, chúng tôi sẽ chạm nhẹ vào một số trường hợp sử dụng và công cụ phổ biến nhất được xây dựng dựa trên quá trình xử lý AST. Và, tôi dự định sẽ nói xong về dự án js2flowchart của mình, chúng tôi sẽ là bản demo tốt cho những gì bạn có thể xây dựng khi làm việc với AST. Vì vậy, hãy ở bên tôi và bắt đầu nào
Cây cú pháp trừu tượng là gì?
Nó là một biểu diễn chương trình phân cấp trình bày cấu trúc mã nguồn theo ngữ pháp của ngôn ngữ lập trình, mỗi nút AST tương ứng với một mục của mã nguồn
Ổn thỏa. Hãy xem nó trên ví dụ
Nó rất đơn giản
Nhưng đây là ý chính. Từ văn bản thuần túy, chúng ta đang có cấu trúc dữ liệu dạng cây. Các mục trong mã khớp với các nút trong cây
Làm cách nào để lấy AST từ mã đơn giản? . Hãy kiểm tra một trình biên dịch trung bình
May mắn thay, chúng ta không cần phải trải qua tất cả các giai đoạn của nó, chuyển đổi mã ngôn ngữ cấp cao thành bit. Chúng tôi chỉ quan tâm đến Phân tích từ vựng và cú pháp. Hai bước này đóng vai trò chính trong việc tạo AST từ mã
Bước đầu tiên. Máy phân tích từ vựng, còn được gọi là máy quét, nó đọc một luồng ký tự [mã của chúng tôi] và kết hợp chúng thành các mã thông báo bằng cách sử dụng các quy tắc đã xác định. Ngoài ra, nó sẽ xóa các ký tự khoảng trắng, nhận xét, v.v. Cuối cùng, toàn bộ chuỗi mã sẽ được chia thành một danh sách các mã thông báo
Khi bộ phân tích từ vựng đọc mã nguồn, nó sẽ quét mã theo từng chữ cái;
Bước thứ hai. Trình phân tích cú pháp, còn được gọi là trình phân tích cú pháp, sẽ lấy một danh sách mã thông báo đơn giản sau khi Phân tích từ vựng và biến nó thành biểu diễn dạng cây, xác thực cú pháp ngôn ngữ và đưa ra các lỗi cú pháp, nếu điều đó xảy ra
Trong khi tạo cây, một số trình phân tích cú pháp bỏ qua các mã thông báo không cần thiết [ví dụ như dấu ngoặc thừa] để chúng tạo 'Cây cú pháp trừu tượng' - nó không khớp 100% với mã, nhưng đủ để biết cách xử lý. Mặt khác, các trình phân tích cú pháp bao gồm đầy đủ tất cả cấu trúc mã tạo ra cây được gọi là 'Cây cú pháp cụ thể'
AST cuối cùng chúng tôi đã nhận được
Bạn muốn tìm hiểu thêm về trình biên dịch?
Trình biên dịch siêu nhỏ. Bạn có thể bắt đầu từ repo này. Đó là một ví dụ siêu đơn giản về tất cả các phần chính của trình biên dịch được viết bằng JavaScript. Nó có khoảng 200 dòng mã thực tế và ý tưởng đằng sau là biên dịch Lisp thành ngôn ngữ C. Tất cả các mã được bao phủ bởi các bình luận và giải thích
https. //github. com/jamiebuilds/the-super-tiny-compiler
LangSandbox. Một dự án tốt đẹp hơn để kiểm tra. Nó minh họa cách xây dựng một ngôn ngữ lập trình. Có một danh sách các bài báo hoặc cuốn sách [nếu bạn thích] cách thực hiện điều đó. Vì vậy, nó đi xa hơn một chút, bởi vì thay vì biên dịch Lisp thành C [như trong ví dụ trước], ở đây bạn có thể viết ngôn ngữ của mình và biên dịch thành C/bytecode và thực thi sau đó.
https. //github. com/ftomassetti/LangSandbox
Tôi chỉ có thể sử dụng một thư viện? . Bạn có thể truy cập astexplorer và chọn một cái bạn thích. Có trình chỉnh sửa trực tiếp nơi bạn có thể chơi với trình phân tích cú pháp AST. Nó cũng chứa nhiều ngôn ngữ khác, ngoài JavaScript
https. // người thám hiểm. bọc lưới/
Tôi muốn đặc biệt làm nổi bật một trong số chúng, mà theo tôi là một cái thực sự tốt, được gọi là Babylon
Nó được sử dụng trong Babel và có lẽ đó là lý do khiến nó trở nên phổ biến. Bởi vì nó được hỗ trợ bởi dự án Babel, bạn có thể mong đợi rằng nó sẽ luôn được cập nhật với các tính năng JS mới, mà chúng tôi đã nhận được khá thường xuyên trong vài năm qua. Vì vậy, khi chúng tôi nhận được điều tiếp theo như 'lặp lại không đồng bộ' [bất cứ điều gì], trình phân tích cú pháp này sẽ không cho bạn biết 'Mã thông báo không mong muốn'. Ngoài ra, nó có API khá tốt và dễ sử dụng nói chung
Ok, bây giờ bạn đã biết cách tạo AST cho mã. Hãy chuyển sang các trường hợp sử dụng thực tế
Trường hợp sử dụng đầu tiên tôi muốn nói đến là dịch mã và rõ ràng là Babel
Babel không phải là 'công cụ hỗ trợ ES6'. Vâng, nó là, nhưng nó không chỉ là những gì nó nói về
Nhiều người liên kết Babel với sự hỗ trợ của các tính năng ES6/7/8. Và, trên thực tế, đó là lý do tại sao chúng ta thường sử dụng nó. Nhưng nó chỉ là một nhóm plugin. Chúng tôi cũng có thể sử dụng nó để thu nhỏ mã, để dịch mã cú pháp liên quan đến React [ví dụ như JSX], plugin cho Flow, v.v.
Babel là một trình biên dịch JS. Ở mức cao, nó có 3 giai đoạn mà nó chạy mã trong. phân tích cú pháp, chuyển đổi và tạo. Bạn cung cấp cho Babel một số mã JavaScript, nó sẽ sửa đổi mã và tạo lại mã mới. Làm thế nào nó sửa đổi mã? . Nó xây dựng AST, duyệt qua nó, sửa đổi nó dựa trên các plugin được áp dụng và sau đó tạo mã mới từ AST đã sửa đổi
Hãy xem điều này trong một ví dụ mã đơn giản
Như tôi đã đề cập trước đây, Babel sử dụng Babylon, vì vậy, điều đầu tiên chúng tôi phân tích mã, sau đó duyệt qua AST và đảo ngược tất cả các tên biến. Bước cuối cùng - tạo mã. Xong. Như bạn có thể thấy ở đây, giai đoạn 1 [phân tích cú pháp] và giai đoạn 3 [tạo mã] trông khá phổ biến, đó là những gì bạn sẽ làm mỗi lần. Vì vậy, Babel sẽ chăm sóc chúng, bởi vì điều duy nhất bạn thực sự quan tâm, đó là chuyển đổi AST
Khi bạn đang phát triển plugin Babel, bạn chỉ cần mô tả nút "khách truy cập" sẽ biến đổi AST của bạn
Thêm nó vào danh sách plugin Babel của bạn, đặt babel-loader trong cấu hình webpack của bạn và chúng ta bắt đầu, dễ thôi
Bạn có thể xem sổ tay Babel nếu bạn muốn tìm hiểu thêm về cách xây dựng plugin babel đầu tiên của mình
https. //github. com/jamiebuilds/babel-cẩm nang
Hãy tiếp tục, trường hợp sử dụng tiếp theo mà tôi muốn đề cập là tái cấu trúc mã tự động và JSCodeshift
Giả sử bạn muốn thay thế tất cả các hàm ẩn danh kiểu cũ bằng các hàm mũi tên ngắn và đẹp
Trình soạn thảo mã của bạn rất có thể sẽ không thể làm điều đó, bởi vì nó không phải là thao tác tìm thay thế đơn giản. Đó là nơi jscodeshift phát huy tác dụng
Nếu bạn nghe thấy 'jscodeshift', rất có thể bạn sẽ nghe thấy nó cùng với 'codemods', điều này có thể gây nhầm lẫn ở lần đầu tiên. Jscodeshift là bộ công cụ để chạy “codemods”. Một "codemod" là một mã thực sự mô tả chuyển đổi nào sẽ được thực hiện thành AST. Vì vậy, ý tưởng thực sự giống với Babel và các plugin của nó
Và bạn có thể thấy nó gần giống như một plugin Babel
Vì vậy, nếu bạn muốn tạo 'cách tự động' để di chuyển cơ sở mã của mình sang phiên bản khung mới, đây là một cách để thực hiện. Ví dụ, đây là phản ứng tái cấu trúc 16 loại prop
Hy vọng mọi người đã chuyển sang phiên bản 16;]
Hãy dùng thử, có nhiều chế độ mã hóa khác nhau đã được tạo, bạn có thể tiết kiệm thời gian cho mình bằng cách không thực hiện thủ công
https. //github. com/facebook/jscodeshift; . //github. com/Reacjs/Reac-codemod
Use-case cuối cùng mình muốn đề cập một chút là Prettier vì chắc ai cũng dùng nó cho công việc hàng ngày
Định dạng đẹp hơn mã của chúng tôi. Nó sẽ ngắt các dòng dài, dọn sạch khoảng trắng, dấu ngoặc, v.v. Vì vậy, nó sẽ lấy mã làm đầu vào và trả về mã đã sửa đổi làm đầu ra. Nghe có vẻ quen thuộc rồi phải không?
Ý tưởng vẫn vậy. Lúc đầu, lấy mã và tạo AST. Sau đó, thực sự phép màu xinh đẹp hơn sẽ xảy ra. AST sẽ được chuyển thành 'đại diện trung gian' hoặc 'Doc'. Ở cấp độ cao, các nút AST sẽ được mở rộng với thông tin về cách chúng liên kết với nhau về mặt định dạng, ví dụ: danh sách các tham số cho hàm nên được coi là một nhóm các mục. Vì vậy, nếu danh sách dài và không vừa trong một dòng, hãy chia từng tham số thành một dòng riêng, v.v. Sau đó, thuật toán chính, được gọi là 'máy in' sẽ đi qua IR và dựa trên toàn bộ bức tranh quyết định cách định dạng mã
Một lần nữa, nếu bạn muốn tìm hiểu thêm lý thuyết đằng sau việc in ấn đẹp, mà thực tế trông nó không hề đơn giản, thì có một cuốn sách có sẵn mà bạn có thể tìm hiểu kỹ
http. //trang chủ. inf. biên tập. AC. uk/wadler/giấy tờ/xinh hơn/đẹp hơn. pdf
Đến đây, điều cuối cùng trong ngày hôm nay tôi muốn đề cập đến là thư viện của tôi có tên là js2flowchart [4. 2k sao trên Github]
Nó thực hiện đúng như tên gọi của nó, nó lấy mã JS và tạo lưu đồ SVG
Và đây là một ví dụ điển hình ở đây vì nó cho bạn thấy rằng bạn có thể làm bất cứ điều gì bạn muốn khi bạn có mã AST đại diện. Không cần thiết phải đưa nó trở lại chuỗi mã, bạn có thể vẽ lưu đồ của nó, bất cứ thứ gì bạn muốn
Trường hợp sử dụng là gì?
Cách đơn giản nhất để thử ngay bây giờ — vào trình chỉnh sửa trực tiếp
https. //bogdan-lyashenko. github. io/js-code-to-svg-flowchart/docs/live-editor/index. html
dùng thử. Ngoài ra, bạn có thể sử dụng nó từ mã hoặc, nó cũng có CLI, vì vậy bạn chỉ có thể trỏ đến tệp từ mỗi tệp bạn muốn tạo tệp SVG. Ngoài ra, còn có tiện ích mở rộng Mã VS [liên kết trong readme]
Vì vậy, những gì khác nó có thể làm gì?
Điều đó có nghĩa là, ví dụ, bạn chỉ có thể vẽ những gì mô-đun xuất hoặc chỉ các định nghĩa lớp hoặc định nghĩa hàm và lệnh gọi của chúng. Sau đó, bạn có thể tạo bản trình bày trong đó mỗi trang chiếu đi sâu hơn vào chi tiết
Ngoài ra còn có một loạt các công cụ hữu ích để bạn có thể sửa đổi cây. Ví dụ: bạn có thể xem tại đây ‘. forEach’, đây chỉ là lệnh gọi phương thức, nhưng chúng ta có thể chỉ định rằng chúng phải được coi là vòng lặp, bởi vì chúng ta biết forEach là một vòng lặp, vì vậy, hãy hiển thị nó giống như một vòng lặp ngay lập tức
Được rồi, làm thế nào nó hoạt động dưới mui xe?
Điều đầu tiên, phân tích mã thành AST, sau đó, chúng tôi duyệt qua AST và tạo một cây khác, tôi gọi nó là FlowTree. Nó bỏ qua rất nhiều mã thông báo nhỏ, không quan trọng nhưng tập hợp các khối chính lại với nhau, như hàm, vòng lặp, điều kiện, v.v. Sau đó, chúng tôi duyệt FlowTree và tạo ShapesTree từ nó. Mỗi nút của ShapesTree chứa thông tin về loại trực quan, vị trí, kết nối trong cây, v.v. Bước cuối cùng, chúng tôi duyệt qua tất cả các hình dạng và tạo biểu diễn SVG cho mỗi hình dạng, kết hợp tất cả lại với nhau thành một tệp SVG
Kiểm tra nó ra https. //github. com/Bogdan-Lyashenko/js-code-to-svg-flowchart
Nếu bạn thích bài đăng này và muốn cập nhật các bài viết tiếp theo của tôi, vui lòng theo dõi tôi trên twitter @bliashenko