create-react-appからpugまで(その2)

その１
https://qiita.com/DaisukeNishi/items/dae74d5dcf5ddb171b3d
その３
https://qiita.com/DaisukeNishi/items/697fb3579d7dd69324b3
その４
https://qiita.com/DaisukeNishi/items/801e1b1e02487e26e905
その5
https://qiita.com/DaisukeNishi/items/ca7d80c104ca7a792f9d
その6
https://qiita.com/DaisukeNishi/items/c8982546c803d2c5dc99

おなじような事を何回も書いてます。

pugで書きたい。

create-react-appで、めちゃ簡単にReactで書けるようになってる。
しかしjsxを覚えるなら最初からpugで覚えたいと思ったが、
いきなりハードルが上がったので、忘れないように反芻して書いておく。

※最初に書いたやり方だと、微妙だったので書き変えます。

1.create-react-appする

$ npm install -g create-react-app
$ create-react-app example
$ cd example
$ yarn start

これでlocalhost:3000ができちゃう。
しかし、フォルダの中を見ても.babelrcと.eslintrcが見当たらない。
babelの設定などは、最初の段階ではreact-scriptsの中に良い感じに書いてあるようです。

２．yarn eject しない

$ yarn eject //← しない

package.jsonの中身を少し変えます。

{
  //省略
  "eslintConfig": { //←この項目は消す。
    "extends": "react-app"
  },
  //省略
  "babel": {     //←これは「yarn eject」しなければ出ない。
      "presets": [
      "react-app"
    ]
  }
}

色々考え直して、やっぱり.babelrcを作ります。

$ touch .babelrc

.bashrcの中身は、同じです。

{
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

設定を変更する

react-scriptsは、.babelrcを読み込む設定になっていないので、
/node_modules/react-scripts/config/webpack.config.js
の中の、
baberc: false を babelrc: trueに編集したい。

しかし

/node_modules/の値を直接書き換えてしまうと、
あとで色々と困る事になってしまう。

なので複製して使う

なので、react-scriptsをコピーして、
一旦ホームディレクトリ（プロジェクトの外）にペーストします。
react-scripts-turn-on-babelrcという名前にし、
react-scripts-turn-on-babelrc/config/webpack.js
を開いてbabelrc: false→babelrc: trueに書き換えて保存します。

Githubに置く

ローカルに保存したままではみんなで使えないので、
自分のGithubにリポジトリを作ってプッシュします。
https://github.com/daisuke240000/react-scripts-turn-on-babelrc
これを「公開」の状態にしておきます。

package.jsonの中にある
"react-script": "^3.4.0"は、削除します、
"react-scripts-turn-on-babelrc":を追加します。
右側はバージョンじゃなくてGithubのリポジトリを書いておきます。

"react-scripts-turn-on-babelrc": "https://github.com/daisuke240000/react-scripts-turn-on-babelrc"

$ yarn

これで設定変更したreact-scriptsが使えるようになります。
"start": "react-scripts-turn-on-babelrc start",に書き換えるのかなと思いきや
そこは書き換えなくても大丈夫のようです。

"scripts": {
    "start": "react-scripts start", //←そのままで、動くっぽい
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

$ yarn start

動きます。当然バージョンが違ったら動かないので、
自分がインストールしたものを編集します。

3.babel-plugin-transform-react-pug入れる

$ yarn add babel-plugin-transform-react-pug
$ yarn add babel-plugin-transform-react-jsx

依存ファイルを2個入れる。※多分-Dを付ける。

{
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

↓こちらを下記のようにする。

{
  "babel": { 
    "presets": [
      "react-app"
    ],
    "plugins": [
      "transform-react-pug",
      "transform-react-jsx" 
    ] 
  }
}

これはpugをjsxに変換してくれる書き方です。
必ずpugの方が上に来ないとダメみたいです。

4.ESLintを入れる。

$ yarn add eslint
$ yarn add eslint-plugin-react-pug

eslint本体はejectする時に自動で入るかもしれません。※多分-Dを付ける。
もしeslintをグローバルにインストールしている場合は、
プラグインもグローバルに入れろ、と書いてある。

$ sudo yarn add -g eslint
$ sudo yarn add -g eslint-plugin-react-pug

環境によってはパーミッションエラーが出る時があるので、sudoいれてあります。
もし「鍵マーク」が表示されたら、自分のパスワードをいれます。
そして、インストールが終わったら
.eslintrcを作って、そこにpackage.jsonにあったeslintConfigを移します。

$ touch .eslintrc

"eslintConfig": {
  "extends": "react-app"
},

↓こちらを下記のように.eslintrcに書きます。

 {
  "plugins": [
    "react-pug"
  ],
  "extends": [
    "react-app",
    "plugin:react-pug/all"
  ]
},

[と{がややこしい上に、babelと設定が似ていて、混乱しやすいです。
eslint-plugin-react-pugが、設定の中ではreact-pugと省略されています。

webpack.config.jsを書き換える

eslintConfigを消しただけでは、向き先が変わらないっぽいので、
先程作ってプッシュした、react-scripts-turn-on-babelrcの
中にあるwebpack.config.jsをまた書き換えます。

useEslintrc: true

これをプッシュして、また入れ直します。

$ yarn upgrade

5.App.jsを書き換える。

今更ですが初期表示のロゴマークくるくるは、App.jsに書いてあります。

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

↓pugに打ち替えてみて、動くか確認します。

function App() {
  return pug`
    div(className="App")
    header(className="App-header")
      img(src=logo className="App-logo" alt="logo")
      p
        | Edit 
        code src/App.js
        |  and save to reload.

      a(className="App-link" href="https://reactjs.org" target="_blank" rel="noOpener noReferrer")
        | Learn React
  `;
}

export default App;

return pugの所が、return (pugなのか return pug( なのか、
どう書けば良いんだろうかと試行錯誤したんですが、結論(要らなかったです。
上記のように、シンタックスのハイライトが消えてしまうので、VSCodeならvscode-react-pug
を入れておくとキレイな表示になります。

6.もう一回ブラウザで確認する

$ yarn start

ちゃんと表示されました。

7.調べてて思った事

これを書いた後に外人はどんなヤリカタしてるんだと思ったら、
どうやらreact-app-rewiredというToolを使っているらしい。

以上です。

参考記事

http://www.beguru.work/2019/01/06/create-react-app-%E3%81%A7-babelrc%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B/
https://kic-yuuki.hatenablog.com/entry/2019/09/08/111817
https://github.com/facebook/create-react-app

https://stackoverflow.com/questions/56513346/how-to-use-pug-templating-engine-with-reactjs
https://qiita.com/TakuyaHara/items/f560d34aaa7857b32c82
https://www.npmjs.com/package/babel-plugin-transform-react-pug
https://github.com/pugjs/babel-plugin-transform-react-pug#eslint-integration
https://github.com/ezhlobo/eslint-plugin-react-pug
https://html2pug.now.sh/