はじめに
これまで React でプロジェクトを始めるときは、create-react-app を使っており、自分で空から環境構築したことはありませんでした。
ふと、その場合はどのような手順で環境を作るんだろう？と思ったので、 Create React App without create-react-app を参考に作業しました。
途中、いくつかエラーを踏んだので、その部分の対処は独自の方法です。
同じリンクを見てつまずいた人もいるかもしれないので、記事にまとめました。
環境構築
プロジェクトフォルダを作成します。
yarn を使ってるのは宗教ではなく、 React Project だし Facebook 産の yarn で作業してみよう、程度の感覚です。
$ mkdir dirname
$ cd dirname
$ yarn init
フォルダ構成を整備します。
$ mkdir -p src/components
$ touch src/components/app.js
$ touch src/index.{html,js}
$ touch .babelrc README.md webpack.config.js
$ echo node_modules > .gitignore
モジュールをインストールしていきます。
この作業では、リンク元のページと違うことをしています。
そのまま試してみるとエラーが出ました。
回避策を調べてみると、@babel/core, @babel/preset-env, @babel/preset-react を利用することを勧められていたのでそれに倣いました。
$ yarn add react react-dom
$ yarn add -D webpack webpack-cli webpack-dev-server
$ yarn add -D babel babel-loader @babel/core @babel/preset-env @babel/preset-react
$ yarn add -D html-webpack-plugin http-server
構成ファイルの内容
リンク元をそのまま活用させていただいているものと、適時修正したものがあります。
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
devtool: 'source-map',
entry: './src/index.js',
output: {
path: path.join(__dirname, "/dist"),
filename: "index_bundle.js"
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}]
},
plugins: [
new HtmlWebpackPlugin({ template: "./src/index.html" })
]
}
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
.babelrc は、利用するモジュールを変えたので、修正しています。
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node_modules/.bin/webpack-dev-server --mode development --open --hot",
"build": "node_modules/.bin/webpack --config webpack.config.js --mode production",
"serve": "node_modules/.bin/http-server ./dist"
},
元記事では build で webpack.prod.js が書かれているのですが、そんなファイルは作成していないのでエラーが出ます。
今回は、dev/prod のファイルを分けることは主目的ではないため、 webpack.config.js を直に指定しています。
app.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (<h1>My React App</h1>)
}
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My React App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js
import React from 'react';
import { render } from 'react-dom';
import App from './components/app';
const rootEl = document.getElementById('app');
render(<App />, rootEl);
if (module.hot) {
module.hot.accept();
}
これで yarn start, yarn build, yarn serve が動作するようになります。
.gitignore
node_modules
dist
build でできるフォルダを含めていなかったので追記しています。
おわりに
React Project を始める場合、 create-react-app が非常に便利です。
とはいえ、自分で手を動かしながら環境を作ることで学べることもあるので、いい経験になりました。
試してみたいライブラリの Get Started が create-react-app を使ってなさそうだったので脱線しました。
これで、ようやくライブラリを試せそうです。