NAPTheDev's Blog

Path mapping trong React

February 26, 2022

Cách setup path mapping trong react với cra, vite, nextjs, webpack. Không còn xa lạ với syntax "@/utils"

Trong một dự án lớn thì việc có một folder structure phức tạp với nhiều file nested sâu không phải là chuyện lạ. Nhưng điều đó sẽ dễ dẫn tới tình trạng như

Nested import

Bài viết này sẽ hướng dẫn các bạn cách setup path mapping trong react để import dễ dàng hơn:

Mapped import

Create React App (cra)

Cra là một tool để giúp tạo dự án react with no config, nhưng chính vì thế nên ta không thể customize webpack một cách trực tiếp.
Ta phải sử dụng Craco (Create React App Configuration Override) để giải quyết vấn đề này.

Cài đặt craco


npm i @craco/craco craco-alias --force

Thay đổi scripts trong package.json


{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
}

File tsconfig.json hoặc jsconfig.json

Thêm vào file tsconfig.json (hoặc tạo file jsconfig.json nếu dùng js)


{
"compilerOptions": {
// ....
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
// ....
}

Hai property "baseUrl" và "paths" đều rất quan trọng, thiếu 1 trong 2 thì sẽ không hoạt động

Tạo file craco.config.js


const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
tsConfigPath: "./tsconfig.json",
// Nếu dùng javascript
/*
source: "jsconfig",
baseUrl: "."
*/
},
},
],
};

Giờ mọi import với path bắt đầu bằng "@/" sẽ được chuyển về src, giúp cho việc import trong nested folder dễ dàng hơn rất nhiều.

Vite

Vite là build tool mới nổi và cũng có một cộng đồng rất mạnh có plugin hỗ trợ path mapping

Cài đặt plugin


npm i vite-aliases

Add plugin vào trong vite.config.js


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { ViteAliases } from "vite-aliases";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), ViteAliases()],
});

Edit file tsconfig.json hoặc jsconfig.json giống cách dùng create-react-app

Giờ thì dự án vite cũng có thể dùng alias import ngắn gọn.

Next js

Nextjs đã có native support cho path mapping, tất cả việc cần làm là edit file tsconfig.json hoặc jsconfig.json

Webpack

Nhiều người sẽ thích tạo dự án react typescript webpack bằng tay, dù đây không phải cách tối ưu nhưng sẽ giúp customization dễ dàng hơn nhiều.
Bạn có thể tham khảo template react typescript webpack

Cài đặt plugin


npm i -D tsconfig-paths-webpack-plugin

Thêm vào webpack.config.js


const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
// ...
resolve: {
plugins: [new TsconfigPathsPlugin()],
// ...
},
};

Edit file tsconfig.json hoặc jsconfig.json giống cách dùng create-react-app

Lưu ý

Kí tự "@" trong path của bài post này là không bắt buộc, hoàn toàn có thể thay bằng các ký tự khác như "~", ... Nhưng vẫn nên sử dụng "@" vì nó tiện khi typing và có nhiều source code lớn dùng.

Kết luận

Và đó là tất cả những cách để thêm path mapping vào trong một dự án react với các build tool phổ biến. Chúc bạn thành công.

Bình luận

Bài viết liên quan

NAPTheDev • © 2022 My Portfolio