2018/04/24更新

[フロントエンド] create-react-appのビルド結果で、js/cssを相対パスで読み込みたい

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
今日は、create-react-appで作ったReactアプリケーションについての話です。ビルド結果のJavaScriptやCSSをindex.htmlから相対パスで読み込む方法について、ブログに書きたいと思います。



目次




何が問題か

Githubページを使うと、簡単に無料でページを公開できます。しかしその場合には、JSファイルやCSSファイルを絶対パスではなく相対パスで読み込む必要があります。
<!--絶対パスでの読み込み例-->
<script type="text/javascript" src="/static/js/main.29a8746a.js">
<!--相対パスでの読み込み例-->
<script type="text/javascript" src="./static/js/main.29a8746a.js">
create-react-appの初期状態では、jsやcssを絶対パスで読み込むようにビルドしますが、これを相対パスにするにはどうしたら良いか、という話です。



homepageプロパティを設定する

設定は簡単です。package.jsonhomepageというプロパティを追加し、その値を./とすることで、ビルド結果のJSやCSSを相対パスで読み込むことができるようになります。
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
package.jsonはこのような使い方ができるんですね。色々と勉強になります。



参考情報

今回の内容は、Githubのイシューでもやりとりされていました。

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



最後に

create-react-appは非常に便利ですが、実戦で使うにはいくつかのTipsを知っておく必要がありそうです。もう少し色々と書きたいと思います。

最後になりますが本ブログでは、フロントエンド、サーバー、Swift、PHP、Node.js、Python、Java、Linux、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。