Front-End Code Splitter

Bộ công cụ chia nhỏ các file SCSS, Vue, i18n để dễ quản lý mã nguồn front-end. Giúp tách các file lớn thành nhiều file nhỏ hơn, dễ bảo trì, tiện quản lý.

Cài đặt

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

# Hoặc chạy trực tiếp với npx
npx front-end-code-splitter <file> [options]

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

Gói này bao gồm 3 công cụ chuyên biệt:

1. SCSS Splitter

Tách file SCSS lớn thành nhiều file nhỏ hơn dễ quản lý với phân tích cú pháp AST chính xác.

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

# Ví dụ
scss-splitter app.scss components/

Tính năng chính:

• Phân tích cú pháp SCSS chính xác với PostCSS
• Tự động phân loại các khối CSS theo chức năng
• Tạo các file con có kích thước cân bằng

2. Vue Splitter

Tách file Vue (SFC) thành các file template, script và style riêng biệt.

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

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

Tính năng chính:

• File Vue ở thư mục gốc (template + import)
• File .js (script có export) trong thư mục con
• File .scss (style) trong thư mục con

3. i18n Splitter

Tách file i18n enum lớn thành nhiều file nhỏ hơn dễ quản lý.

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

# Ví dụ
i18n-splitter i18nEnum.js src/locales/ 200

Tính năng chính:

• Tách các enum i18n thành các file riêng biệt
• Tự động tạo file index.js với các import
• Nhóm các enum liên quan để tối ưu kích thước tệp

Các tùy chọn chung

Bạn có thể chạy mỗi lệnh với --help để xem các tùy chọn chi tiết:

scss-splitter --help
vue-splitter --help
i18n-splitter --help

Ví dụ về quy trình làm việc

Tách file SCSS lớn

scss-splitter app.scss components/ --max-size 100 --add-import "_variables.scss"

Kết quả:

app.scss (file gốc, cập nhật với imports)
components/
  ├── _app_variables.scss
  ├── _app_mixins.scss
  └── ... các file khác

Tách file Vue

vue-splitter Component.vue src/components/

Kết quả:

src/components/
  ├── Component.vue (template + imports)
  └── Component/
      ├── Component.js (script với exports)
      └── Component.scss (style)

Tách file i18n

i18n-splitter i18nEnum.js src/locales/ 200

Kết quả:

src/locales/
  ├── index.js (exports tất cả enum)
  ├── i18nEnum_common.js
  ├── i18nEnum_dashboard.js
  └── ... các file khác

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

Bạn cũng có thể sử dụng các công cụ này như một thư viện trong code:

const { splitScss, splitVue, splitI18n } = require('front-end-code-splitter');

// Tách file SCSS
splitScss.splitScssFile({
  inputFile: 'app.scss',
  outputDir: 'components/'
});

// Tách file Vue
splitVue.splitVueFile('Component.vue', 'src/components/');

// Tách file i18n
splitI18n.splitI18nEnumFile('i18nEnum.js', 'src/locales/', 200);

Yêu cầu

• Node.js >= 12.0.0

Giấy phép

MIT