gatsby-plugin-root-import: Rút ngắn import paths cho Gatsby

Khi import một file, chắc hẳn chúng ta đã gặp một đường dẫn như thế này:

import HomiedevInfo from "../../../components/HomiedevInfo/HomiedevInfo"

Cách import này nhìn khá dài dòng và khả năng mở rộng kém, nó cũng sẽ gây ra lỗi code khi chúng ta cấu trúc lại code hoặc chuyển tệp sang thư mục mới, lúc này, ta sẽ phải thay đổi từng đường dẫn 😥😥.

Trong bài viết rút ngắn import paths cho dự án React, mình đã giới thiệu cách chúng ta sử dụng file jsconfig.js để cài đặt baseUrl giúp việc import được ngắn gọn, dễ sử dụng hơn.

Sau khi build project của mình với cách làm trên, mình nhận được một lỗi ModuleNotFoundError: Module not found: Error: Can't resolve 'utils' in 'D:..\src\templates'. Sau khi tìm hiểu thì mình mới biết là Gatsby hiện không hỗ trợ chúng ta thay đổi baseUrl trong file jsconfig.json cũng như tsconfig.json.

Hôm nay mình xin giới thiệu đến các bạn 2 cách giúp chúng ta cải thiện import paths cho Gatsby ^^.

Cách đầu tiên, các bạn có thể sử dụng alias của webpack, Gatsby sử dụng webpack để gói các module mà chúng ta tạo ra thành một hoặc nhiều bundles được tối ưu hóa và giúp website của chúng ta hoạt động.

Để modify (chỉnh sửa) cấu hình webpack mặc định, ở file gatsby-node.js (nằm ở thư mục gốc của project) các bạn sử dụng hàm onCreateWebpackConfig:

const path = require("path");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "@components": path.resolve(__dirname, "src/components"),
        "@static": path.resolve(__dirname, "static")
      },
      modules: [path.resolve(__dirname, 'src'), 'node_modules']
    }
  });
}

Khi thêm một thư mục vào modules để tìm kiếm các module khi import, thì thư mục đó sẽ được ưu tiên hơn node_modules/.

Sau khi config xong, các bạn có thể sử dụng như thế này:

// import HomiedevInfo from "../../../components/HomiedevInfo/HomiedevInfo"
import HomiedevInfo from "@components/HomiedevInfo/HomiedevInfo"
// hoặc
import HomiedevInfo from "components/HomiedevInfo/HomiedevInfo"

Chỉ với một vài cài đặt, các bạn có thể thấy việc import trở nên dễ dàng và nhìn gọn hơn đúng không ^^.

Cách tiếp theo là chúng ta sử dụng plugin có tên gatsby-plugin-root-import, cài đặt bằng cách sử dụng:

npm install gatsby-plugin-root-import

// hoặc

yarn add gatsby-plugin-root-import

Trong file gatsby-config.js các bạn thêm plugin này vào là được:

module.exports = {
  plugins: [
    "gatsby-plugin-root-import",
    // ...
  ],
};

Cách hoạt động tương tự như chúng ta sử dụng onCreateWebpackConfig ở trên, các bạn có thể đọc source code của plugin này tại đây.