フロントエンドの開発を始めるつもりが気づいたらビルド環境整備してた

Nuxt 使ってみたいとか書いたけどなんか思ってたのと違ったのでやっぱやめた。まだ触ったことないのと久々に React 触ってみたいので、styled-components でやってみる。開始時点では、node v12.13.1 がローカルに入っているだけの状態。

まずは styled-components を npm で入れる。--save は無くてもよくなってた。お仕事じゃないので何も考えず beta で。

npm install styled-components@beta

React とかが足りないので警告がでた。

npm WARN styled-components@5.0.0-rc.2 requires a peer of react@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN styled-components@5.0.0-rc.2 requires a peer of react-dom@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN styled-components@5.0.0-rc.2 requires a peer of react-is@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN stylis-rule-sheet@0.0.10 requires a peer of stylis@^3.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-plugin-styled-components@1.10.6 requires a peer of styled-components@>= 2 but none is installed. You must install peer dependencies yourself.

うーん、そりゃそうだろうから何はともあれ React が要るよな、ということでまずは React の環境を整える。さっき入れた中途半端な styled-components は無視したいので、node_modules と package.json は削除して最初からやり直し。

最終的には TypeScript も入れたいけど、最初は JS でいく。webpack と Babel が必要そう。

Create a New React App – React

Creating a React App… From Scratch. - Noteworthy - The Journal Blog

まずは Babel だけで React(というかJSX) を JS にトランスパイルするところを目指す。（なんか数年前も同じことやってたな。。）

npm install --save-dev @babel/core @babel/cli @babel/preset-react

preset-env は一旦置いておいて、preset-react だけ使う。 presetとは何かというと、いくつかの Babel plugin を用途に合わせてまとめたもの。

Usage Guide · Babel

Instead of adding all the plugins we want one by one, we can use a "preset" which is just a pre-determined set of plugins

これで React で良くみる JSX のトランスパイルに必要な依存は揃った気がするので、以下のようなテスト用 JSX ファイルを作成してトランスパイルしてみた。

// src/assets/js/test.jsx

function test() {
    return (
        <div>aaa</div>
    )
}

test();

❯ npx babel --presets @babel/preset-react src/assets/js/test.jsx

function test() {
  return React.createElement("div", null, "aaa");
}

test();

ということで、トランスパイルはできてる。もちろんこのままだとReact.createElementが解決できなくて実行できないので、次は webpack で依存ライブラリをまとめて bundle する。

Getting Started | webpack

まずは webpack と babel-loader をインストール。 babel-loader は、webpack で処理対象のファイルを読み込むときに Babel でトランスパイルしてくれる、ぐらいのフワッとした理解。

npm install -D webpack webpack-cli babel-loader

React も入れる。

npm install react react-dom

あとは webpack を設定して、bundle 実行して、適当に書いた HTML から読み込む。

bundle は webpack-cli を使うだけ。

npx webpack

作ったファイルはこんな感じ。

<!-- test.html -->
<body>
<script src="./dist/main.js"></script>
</body>

// webpack.config.js
module.exports = {
    entry: "./src/assets/js/test.jsx",
    mode: "development",
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {presets: ["@babel/react"]}
            }
        ]
    }
};

// src/assets/js/test.jsx
import React from 'react';
import ReactDOM from 'react-dom';

function test() {
    return (
        <div>test dayo</div>
    )
}

ReactDOM.render(test(), document.body);

ここまでやって、test.html を開くと test dayo と表示される。

ということで、webpack で React のビルドまでできるようになったけど、疲弊したので一旦終了。 styled-components にたどり着けるのはいつになるやら。

最後に、package.json を丸っと載せておく。

{
  "name": "bookmark",
  "devDependencies": {
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "babel-loader": "^8.0.6",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

あしたからがんばる

プログラミングの話と時々サッカーの話

フロントエンドの開発を始めるつもりが気づいたらビルド環境整備してた