Universal Code Splitter

Bộ công cụ dòng lệnh đa năng giúp chia nhỏ các file code front-end phức tạp thành các module dễ quản lý hơn.

Cài đặt

# Cài đặt toàn cục
npm install -g universal-code-splitter

Các công cụ có sẵn

Gói này cung cấp các lệnh riêng biệt cho từng loại file:

1. SCSS Splitter

Tách file SCSS lớn thành nhiều file nhỏ hơn dựa trên các danh mục (variables, mixins, layout, components, etc.) và kích thước file.

# Cách sử dụng
scss-splitter <file.scss> [output-dir] [options]

# Ví dụ
scss-splitter styles/main.scss src/styles/modules/ --max-size 150

Tùy chọn chính:

• --max-size <lines>: Số dòng tối đa mỗi file con.
• --preserve-original: Giữ nguyên file gốc.
• --add-import <path>: Thêm import vào đầu file con.

(Chạy scss-splitter --help để xem đầy đủ tùy chọn)

2. Vue Splitter

Tách các block <script> và <style> từ file Vue (Single File Component) thành các file .js và .scss (hoặc ngôn ngữ style khác) riêng biệt nếu chúng vượt quá ngưỡng kích thước nhất định.

# Cách sử dụng
vue-splitter <file.vue> <output-dir> [options]

# Ví dụ
vue-splitter src/components/UserProfile.vue src/components/UserProfile/

Tùy chọn chính:

• Mặc định tách script/style nếu lớn hơn 200 dòng.

(Chạy vue-splitter --help để xem đầy đủ tùy chọn)

3. Class JS Splitter

Tách mỗi class ES6 trong một file thành module riêng, và nhóm các method của class đó thành các file nhỏ hơn.

# Cách sử dụng
class-js-splitter <file.js> [output-dir] [options]

# Ví dụ
class-js-splitter src/utils/ApiHandler.js src/utils/api-handler/ --methods-per-file 5

Tùy chọn chính:

• --methods-per-file <num>: Số lượng method tối đa trong mỗi file con (mặc định: 10).
• --preserve-original: Giữ nguyên file gốc.

(Chạy class-js-splitter --help để xem đầy đủ tùy chọn)

4. Object Literal JS Splitter

Tách các thuộc tính của một object literal lớn (thường dùng cho i18n, constants, enums) thành các file module riêng lẻ hoặc nhóm lại.

# Cách sử dụng
object-js-splitter <file.js> [output-dir] [options]

# Ví dụ (tách từng thuộc tính)
object-js-splitter src/locales/en.js src/locales/en/

# Ví dụ (nhóm theo số dòng)
object-js-splitter src/constants/appConfig.js src/constants/ --line-threshold 150

Tùy chọn chính:

• --group: Nhóm các thuộc tính lại thay vì tách lẻ.
• --properties-per-file <num>: Số thuộc tính mỗi file khi nhóm (mặc định: 5).
• --line-threshold <num>: Số dòng tối đa mỗi file khi nhóm.
• --preserve-original: Giữ nguyên file gốc.

(Chạy object-js-splitter --help để xem đầy đủ tùy chọn)

Sử dụng như thư viện

Bạn cũng có thể import và sử dụng các hàm tách file trong code JavaScript của mình:

const {
  splitScss,
  splitVue,
  splitClassJs,
  splitObjectJs
} = require('universal-code-splitter');

// Ví dụ gọi hàm
splitScss.splitScssFile({ inputFile: 'main.scss', outputDir: 'modules/' });
splitVue.splitVueFile('Component.vue', 'src/component/');
splitClassJs.processJavaScriptFile({ /* options */ }); // Cần xem chi tiết hàm trong file .js
splitObjectJs.processObjectLiteralFile({ /* options */ }); // Cần xem chi tiết hàm trong file .js

Lưu ý: Các hàm processJavaScriptFile và processObjectLiteralFile có thể cần điều chỉnh để nhận options thay vì đọc từ process.argv khi dùng như thư viện.

Yêu cầu

• Node.js >= 14.0.0

Giấy phép

MIT