質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

3875閲覧

React:webpackで絶対パスを使うように設定した

dwayne_johnson

総合スコア86

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/05/08 00:20

Reactでwebアプリ開発をしております。

Reactでコンポーネントをimportする際に、相対パスだと階層が深い時にパスが複雑になってしまい扱いが大変なので、絶対パスで読み込めるようにしたいと考えています。

具体的に

変更前

import foo from './foo' import bar from '../../../bar' import baz from '../../lib/baz'

変更後

import foo from './foo' import bar from 'app/bar' // => src/app/bar import baz from 'an/example/import' // => src/an/example/import

webpack.config.jsが上手く設定できない

weboackでのビルドの際に、パスをうまく読み込むよう設定しようと考えています。
webpack.config.jsをpackage.jsonと同じディレクトリに配置して、内容を以下のようにしました。

const path = require('path'); module.exports = { resolve: { modules: ['node_modules', 'src'], extensions: ['.js', '.jsx'], } }

こちらの「Webpackのモジュール「resolve」の設定で複雑なパスのインポートを避ける」を参考にしました。

いろいろwebpackの設定方法を調べてみたのですが、なぜうまくいかないのか見当がつかない状況です。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

karamarimo

2018/05/08 02:13

webpackのバージョンを書いたほうがいいと思います。
dwayne_johnson

2018/05/08 14:32

ありがとうございました。バージョンを確認しようとしたところ、そもそもの問題に気が付きました。お手数おかけしました。
guest

回答2

0

ejectせずに絶対パスでインポートできるようにする方法があるらしいです。

Webpack Alias · Issue #2188 · facebook/create-react-app
Absolute Imports with Create React App - Medium

訳すと、
0. .envファイルをプロジェクトのルートフォルダーに作成する
0. NODE_PATH=srcと書いて保存する

こうすると例えばsrc/components/MyCmp

js

1import MyCmp from 'components/MyCmp'

でインポートできるらしいです。

投稿2018/05/09 02:11

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

create-react-app で構成したReact環境では、webpackの設定はできない

create-react-appで環境構築した場合、webpackに独自の設定を加えるにはnpm ejectして独自で環境を管理するようにしなければならないようです。

https://github.com/facebook/create-react-app/issues/99

今のところはあきらめることにしました。よりReact周りについて理解が深まり、必要に迫られた際に再度検討したいと思います。

投稿2018/05/08 14:32

dwayne_johnson

総合スコア86

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問