TypeScript + CRA 3 + Absolute Import + Electron

Doko
Administratorinfo
Lưu ý: Ở thời điểm hiện tại, CRA 3.0 đã hỗ trợ absolute import. Ta không cần phải dùng đến craco để import mà có thể dựa vào src/
làm alias gốc.
Kể từ phiên bản Create React App (CRA 2.0), ta đã có thể tạo project với TypeScript mà không cần dùng đến create-react-app-typescript
. Và nhờ có Babel 7 với khả năng hỗ trợ TypeScript mạnh, việc migrate sang TypeScript trở nên dễ dàng hơn rất nhiều.
Tuy nhiên...
Một trong những tính thiếu của CRA là hỗ trợ absolute import với custom alias (thường là dạng ~/
hoặc @/
). Tức là thay vì import kiểu:
thì ta chỉ cần:
Tuy nhiên, cũng một phần do sử dụng Babel để transpile code, tính năng absolute import của CRA khá hạn chế và có một số quy định bắt buộc bạn phải theo. Ví dụ như khi chạy dev hoặc build, 2 trường paths
và baseUrl
bị loại bỏ khỏi tsconfig.json
. Nghĩa là nếu muốn custom đường dẫn import, chỉ còn cách duy nhất là eject ra.
Nhưng giờ thì không cần nữa, vì ta đã có công cụ rất ngon là craco.
#
Trước khi bắt đầuNhư team CRA đã khuyến cáo, nếu eject project hoặc rewire project tạo bằng CRA thì tức là bạn đã bỏ mất cơ hội được team CRA hỗ trợ và phải chịu trách nhiệm với config của mình.
Nhưng may mắn thay là với craco
, ta hoàn toàn có thể cho quay về config cũ (react-scripts
) nếu có điều gì xảy ra, và đương nhiên là sẽ an toàn hơn so với việc phải eject cả project.
craco
#
Cài đặt craco là một công cụ tuyệt vời, giúp ta tùy biến project tạo bằng CRA mà không cần eject. Đây được coi như hậu bối của react-app-rewired
Sau khi cài xong, tạo một file có tên craco.config.js
, ta sẽ dùng đến sau.
Sau đó đổi file package.json
thành:
Bằng cách này, ta sẽ có thể chạy CRA qua craco
, và các setting trong file craco.config.js
cũng sẽ được inject vào.
#
Extend các path từ một file lẻTheo mặc định, CRA sẽ ghi đè lên file tsconfig.json
mỗi khi ta chạy npm start
, do đó ta cần phải tìm cách để sửa từ một file riêng.
Ta có thể đặt tên file này tùy thích, do CRA luôn ghi đè file tsconfig.json
nên ta sẽ luôn define paths
và baseUrl
trong file này. Ta tạm đặt tên là tsconfig.custom.json
.
Vậy là ta đã có thể import được từ các folder con trong src
như components/MyComponent
. Sau đó ta extend trong file tsconfig.json
:
craco
#
Nối với webpack alias bằng Giờ thì ta cần chỉ định cho transpiler gán đặc danh cho thư mục gốc của project để trỏ vào đường dẫn đúng. Có 2 cách thực hiện:
- Sử dụng
babel-plugin-module-resolver
- Config webpack alias.
Ta sẽ chọn cách thứ 2, vì đơn giản là không cần cài thêm gì cả.
Mở file craco.config.js
và sửa lại như sau:
Vậy là ta import được theo kiểu:
Nếu muốn chỉ định chỉ 1 số thư mục thì ta có thể làm dạng:
Restart lại server, và lúc này absolute import đã có thể dùng được.
moduleNameMapper
cho Jest#
Config Nếu sử dụng Jest để viết test, ta cần viết thêm một chút để nó biết đường dẫn import, và việc này cũng được craco
hỗ trợ.
File đầy đủ sẽ có dạng:
#
Tích hợp ElectronPhần này hoàn toàn là phụ lục, khả năng là bạn sẽ không cần. Nhưng nếu yêu cầu project của bạn cần thêm phần build app Electron với React thì sau đây là hướng dẫn:
Cài đặt các package cần thiết:
warning
Không được thêm cờ --dev
(nếu dùng yarn
) hoặc --save-dev
(nếu dùng npm
), nếu không sẽ không có tác dụng.
Và cài các package sau, các package này thì phải cài đặt ở dạng devDependencies
:
Trong đó có 2 package đặc biệt:
wait-on
: Chờ webpack xử lý, sau đó mới chạy electron.concurrently
: Chạy các tác vụ song song với nhau để tiết kiệm thời gian xử lý.
Tiếp theo, ta bố sung thêm 1 số lệnh vào phần scripts
của package.json
:
Thêm phần sau vào file tsconfig.json
:
Tạo một thư mục cùng cấp với src
, đặt tên là electron
, bên trong là file main.ts
như sau:
Vậy là ta đã có một app electron với kích thước cửa sổ mặc định là 1000x700.
Tiếp theo, tạo file tsconfig.json
trong thư mục electron:
Và thế là xong, ta đã có một app electron chạy hoàn chỉnh được trên cả web:
và electron:
Để build thì câu lệnh cũng rất đơn giản, với web:
và với electron:
Chúc các bạn thành công.