Reactでroot importする方法

概要

React Native(RN リアクトネイティブ)でも紹介したroot importをReact(リアクト)でも適用して見ます。なぜroot importを使うか、問題点は何にか知りたい方はReact Native(RN リアクトネイティブ)のブログを参考してください。

リアクトネイティブ(React Native)でrootからimportする

このブログポストで使うソースコードはギットハブ(Github)に公開されております。

Github: https://github.com/dev-yakuza/react_root_import

プロジェクト準備

このブログポストで使うReact(リアクト)プロジェクトはWebpack(ウェブパック)とTypescript(タイプスクリプト)、styled-componentsが適用されたプロジェクトをベースにしています。もっと詳しく内容は以前のブログポストを参考してください。

以前のブログポストでプロジェクトを生成したら下記のようなフォルダ構造が出来上がります。私たちはreact_styled-componentsの名前ではなくreact_root_importの名前でプロジェクトを生成しました。

|-- src
|   |-- index.html
|   |-- App.tsx
|-- .babelrc
|-- package.json
|-- webpack.config.js

babel-plugin-root-import

rootフォルダから参照するためbabel-plugin-root-importを下記のコマンドでインストールします。

npm install babel-plugin-root-import --save-dev

React(リアクト)プロジェクトの.babelrcを開いて下記のように修正します。

{
  "presets": [
    ...
  ],
  "plugins": [
    [
      "babel-plugin-root-import",
      {
        "rootPathPrefix": "~",
        "rootPathSuffix": "src"
      }
    ]
  ],
  "env": {
    ...
  }
}

私のフォルダ構造を見たら分かると思いますがsrcフォルダへ全てのソースコードを管理しています。したがってrootフォルダではなくsrcフォルダを基準に設定しました。

Webpack設定

rootフォルダを参照できるようにwebpack.config.jsを開いて下記のように修正します。

...
module.exports = {
  mode: process.env.NODE_ENV,
  entry: {
    ...
  },
  output: {
    ...
  },
  module: {
    ...
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  plugins: [
    ...
  ],
};

Typescript

Typescript(タイプスクリプト)を使ってない方は上の設定だけ解決出来ます。私はReact(リアクト)プロジェクトでTypescript(タイプスクリプト)を使っているのでTypescript(タイプスクリプト)もrootフォルダを認識できるように設定します。

React(リアクト)プロジェクトのtsconfig.jsonファイルを開いて下記のように修正します。

{
  "compilerOptions": {
    ...
    "baseUrl": "./src", // all paths are relative to the baseUrl
    "paths": {
      "~/*": ["*"] // resolve any `~/foo/bar` to `<baseUrl>/foo/bar`
    }
  },
  ...
}

ソースコード修正

上で設定した内容を確認するためソースコードを修正して見ます。src/Components/Title/index.tsxを生成して下記のように修正します。

import * as React from 'react';
import Styled from 'styled-components';

const Label = Styled.h1`
  color: red;
`;
interface Props {
  label: string;
}

const Title = ({ label }: Props) => {
  return <Label>{label}</Label>;
};

export default Title;

そしてsrc/Features/Top/index.tsxを生成して下記のように修正します。

import * as React from 'react';

import Title from '~/Components/Title';

interface Props {}

const Top = ({  }: Props) => {
  return <Title label="Hello World!" />;
};

export default Top;

最後に、src/App.tsxを開いて下記のように修正します。

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import Top from './Features/Top';

interface Props {}

const App = ({  }: Props) => {
  return <Top />;
};

ReactDOM.render(<App />, document.getElementById('app'));

確認

上で設定した内容がうまく動作するか確認するため下記のコマンドでWebpack(ウェブパック)テストサーバーを実行します。

npm start

ブラウザでhttp://localhost:8080/を開いたらHello World!が表示されることが確認出来ます。下記のコマンドでWebpack(ウェブパック)を使ってReact(リアクト)プロジェクトをビルド(build)して見ます。

npm run build

そしたらdistフォルダへファイルたちが生成されることが確認出来ます。

確認

これでReact(リアクト)プロジェクトでもimportする時、../../../../ではなく~/を使えるようになりました。ソースコードでも分かると思いますが、私は参照するコンポーネント(Component)がフォルダ中にある場合./を使って参照します。フォルダの外にある場合~/を使って参照しています。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！