Tuesday, March 2, 2021
Lưu Xuân Trường's Blog
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
Lưu Xuân Trường's Blog
No Result
View All Result

Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

truongluu by truongluu
31/05/2020
in ReactJS, UmiJS
Reading Time: 6min read
0 0
9
Giới thiệu về UmiJS P1 (Tổng quan về umiJS)
0
SHARES
624
VIEWS
Share on FacebookShare on Twitter

Bài viết này mình sẽ đi qua về cấu trúc thư mục và một vài cấu hình hay dùng khi làm việc với umiJS và một số tính năng, để tìm hiểu nhiều hơn các bạn có thể tham thảo trên trang chủ umiJS.

I. Cấu trúc thư mục umiJS:

Khi tạo dự án từ umi package, chúng ta sẽ có cấu trúc thư mục:

  • dist: thư mục build ứng dụng
  • mock: thư mục để định nghĩa mock dữ liệu cho ứng dụng

    – Ở thư mục mock chúng ta khởi tạo cái mock data cần thiết chia tách bằng các file hoặc 1 file tùy bạn
    – Trong mổi file mock mô tả phương thức, đường dẫn và dữ liệu trả về tương ứng. gọi bằng cách tạo request theo link http://localhost:3000/api/currentUser– Mặc định thì mock  sẽ được kích hoạt khi gọi lệnh umi dev, nếu muốn bỏ qua không dùng mock trong ứng dụng, chúng ta truyền thêm tham số MOCK=none khi chạy lệnh umi dev, tham khảo package.json file
    1
    2
    3
    4
    5
    6
    7
    8
    "scripts": {
        "start": "UMI_ENV=dev umi dev",
        "start:no-mock": "cross-env MOCK=none yarn start",
        "build": "UMI_ENV=prod umi build",
        "test": "umi test",
        "lint": "eslint --ext .js src mock tests",
        "precommit": "lint-staged"
      },
  • node_modules: thư mục chứa cái package của ứng dụng.
  • src: toàn bộ mã của ứng dụng sẽ nằm ở thư mục này, bao gồm các thư mục
    1. assets: lưu trữ các file assets của ứng dụng bao gồm styles, hình ảnh, font….
    2. components: khai báo các component có thể sử dụng lại trong toàn bộ ứng dụng
    3. layouts: lưu trữ file layout của ứng dụng
    4. models: tạo model cho toàn bộ ứng dụng, umi sẽ  dựa vào thư mục này để sinh ra state cho toàn bộ ứng dụng.
    5. pages: tạo page cho ứng dụng, từ cấu trúc thư mục trong pages, umi sẽ sinh ra định tuyến tương ứng cho toàn bộ ứng dụng của bạn
    6. file app.js và global.scss
    7. Vì umi hổ trợ kiến trúc thư mục directory duck, nên việc mình có thể linh hoạt tạo thư mục models, components trong thư mục trong thư mục pages, sẽ được umi quét và sinh ra tự động (điều này rất tiện, nếu bạn muốn làm việc theo module và các module tách biệt lẫn nhau)
      Điều này cũng khá thú vị nếu tổ chức mã theo module độc lập, với cấu trúc thư mục module tách biệt nhau, umi sẽ giúp bạn chia tách file nhỏ hơn cấp module khi chạy ứng dụng, tức là khi vào đường dẫn tương ứng như là user/login chẳng hạn thì nó mới tải thêm page login và models của page login, giúp chia tách code nhỏ hơn. Thay vì, bạn tạo các file model trong thư mục models thì toàn bộ file sẽ được load vào ứng dụng khi chưa cần thiết.
      Các bạn xem qua ở hình bên dưới
      với (1) là model product mình khai báo bên trong thư mục models ngoài gốc và (2) là model user mình khai báo bên trong theo module user, và đây là điều khác biệt khi bạn chạy ứng dụng lên.

      1. Model product sẽ được tải ngay từ đầu theo ứng dụng
      2. Model user chỉ được tải khi bạn tải page user, đó là khi bạn truy truy cập đương link: /user/login
        Cây trạng thái lúc đầu
        và sau khi load thêm module userKhi quản lý thư mục theo dạng module như trên, thì umi sẽ chia tách file ứng dụng nhỏ hơn nữa, tải page và model tương ứng theo từng module.
         Điều này có ý nghĩa làm tăng tốc độ cho ứng dụng không tải những page hoặc model nếu thật sự cần thiết

II. Một một cấu hình khi dùng umiJS:

Một số cấu hình mà khi làm việc với umiJS hình thường dùng:

  • Sử dụng SASS
    1
    sass: {}

    Lưu ý: trong trường hợp này bạn phải cài thêm 2 package là node-sass và sass-loader, để sử dụng được SASS
    1
    yarn add -D node-sass sass-loader
  • Tải cấu hình theo từng môi trường (dev, prod)
    Ở màn hình này, umi cho mình tạo file cấu hình theo cấu trúc .umirc.[envinroment].js (với environment là dev và prod). Việc của mình là thêm các cấu hình theo từng môi trường tương ứng, ở đây, mình thường khai báo về đường dẫn API
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // ref: https://umijs.org/config/
    // noinspection RegExpSingleCharAlternation, SpellCheckingInspection
    export default {
      define: {
        "process.env": {
          ...process.env,
          LOGIN_PAGE_BASE: '/user/login',
          AUTH_API: 'http://localhost:3000/v1/auth/api',
          COURSE_API: 'http://localhost:3001/v1/course/api',
          CLOUD_API: 'http://localhost:3002',
          POST_API: 'http://localhost:3003/v1/post/api'
        }
      }
    }

    Trong trường hợp bạn có thêm các môi trường khác như staging, qc thì bạn cũng tạo file như cấu trúc trên:

    • .umirc.staging.js
    • umirc.qc.js
      Sau đó bạn cấu hình lại scripts trong packages.json để tải đúng cấu hình yêu cầu
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      "scripts": {
          "start": "cross-env UMI_ENV=dev umi dev",
          "start:staging": "cross-env UMI_ENV=staging umi dev",
          "start:qc": "cross-env UMI_ENV=qc umi dev",
          "build": "cross-env UMI_ENV=prod umi build",
          "test": "umi test",
          "lint": "eslint --ext .js src",
          "lint-staged": "lint-staged",
          "lint-staged:js": "eslint --ext .js"
        }
  • Thêm mã hash khi build ứng dụng, chỉ định loại history của trình duyệt
    1
    history: 'hash', // browser, hash, memory

Giới thiệu về UmiJS P1 (Tổng quan về umiJS)
Giới thiệu về UmiJS P3 (Permission routing)

Nguồn: umiJS

Tags: dvaJSreactJSSSRumiJS
Previous Post

Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

Next Post

Quản lý trạng thái tải của side effect trong NuxtJS

truongluu

truongluu

Next Post
Quản lý trạng thái tải của side effect trong NuxtJS

Quản lý trạng thái tải của side effect trong NuxtJS

Comments 9

  1. Pingback: Giới thiệu về UmiJS (Phần 1) – Lưu Xuân Trường's Blog
  2. Truong Chi Nhan says:
    1 year ago

    tiếp phần 3 đi bạn.

    Reply
    • truongluu says:
      1 year ago

      Ok bạn

      Reply
  3. Pingback: Giới thiệu về UmiJS P1 (Tổng quan về umiJS) - Lưu Xuân Trường's Blog
  4. Pingback: Giới thiệu về UmiJS P4 (Server Side Rendering) - Lưu Xuân Trường's Blog
  5. Anh says:
    1 year ago

    Anh có thể chỉ rõ hơn cho e phần config của phần Environment Variables với windown k ạ ??

    Reply
    • truongluu says:
      12 months ago

      Này em nói rõ hơn xí, A chưa hiểu em đang cần gì

      Reply
  6. Hung says:
    4 months ago

    Cảm ơn bạn, mình mới tìm hiểu về UmiJs rất vui vì tìm dc blog chia sẻ này.
    Mình thấy từ bản UmiJs 3 có plugin-model sử dụng để quản lý state. Vậy từ bản mới này dvajs chỉ là optional và hoàn toàn có thể thay thế bằng hook useModel. Bạn có thể chia sẻ kinh nghiệm phần hook này dc ko? Case nào thì nên dùng useModel, case nào thì nên dùng dvajs?
    Cảm ơn về những chia sẻ của bạn 🙂

    Reply
    • truongluu says:
      4 months ago

      Ok bạn, mình sẽ ra bài viết về khi nào nên dùng hook, khi nào thì sử dụng dvaJS nhé, để tùy trường hợp mà mình áp dụng cho hợp lý

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

If you are born poor, its not your mistake,

But if you are die poor, its your mistake

Bill Gates

Quotations

About me

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

Recent Posts

  • Code push in React Native
  • What’s middleware? How does it work?
  • Styled components trong ReactJS
  • Frontity cơ bản phần I (Tạo và chạy dự án)
  • React framework for WordPress

Recent Comments

  • truongluu on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Hung on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Redux Saga phần III (Tips khi làm việc) - Lưu Xuân Trường's Blog on Quản lý trạng thái tải khi dùng redux-saga
  • Redux Saga phần II (Các khái niệm cơ bản) - Lưu Xuân Trường's Blog on Cheatsheets Non Blocking, Blocking Redux Saga
  • truongluu on Giới thiệu về UmiJS P4 (Server Side Rendering)

Archives

  • February 2021
  • January 2021
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • March 2020
  • February 2020
  • January 2020
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • April 2018
  • March 2018

Categories

  • AdonisJS
  • Angular
  • Arduino
  • Backend
  • Câu Hỏi Phỏng Vấn
  • CSS
  • Ebook
  • Frontend
  • Frontity
  • Góc Ngoài Lề
  • How to
  • IOS
  • IQ Test
  • Javascript
  • Kinh nghiệm
  • Kinh nghiệm làm việc
  • Máy chủ
  • Mobile
  • MongoDB
  • NestJS
  • NodeJS
  • NuxtJS
  • Plugins
  • React Native
  • React Native
  • ReactJS
  • Redis
  • Redux-Saga
  • RxJS
  • Tutorials
  • UmiJS
  • Uncategorized
  • VueJS
  • WordPress

Friends

Phu's blog
  • RxJS toàn tập (P1 giới thiệu RxJS là gì)

    RxJS toàn tập (P1 giới thiệu RxJS là gì)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

    0 shares
    Share 0 Tweet 0
  • Redux Saga phần I (Giới thiệu)

    0 shares
    Share 0 Tweet 0
  • Một số câu hỏi phỏng vấn frontend developer

    0 shares
    Share 0 Tweet 0

About me

Lưu Xuân Trường

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

© 2020 https://luuxuantruong.info

No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ

© 2020 https://luuxuantruong.info

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In