からの続きです。

Babel.jsのインストール

Babel.js とは、Babel.js のトップページの例にあるように、モダン JS(ES2015 移行のJavaScript) を未対応の古いブラウザでも解釈できるような JavaScript に変換してくれるトランスコンパイラ (変換器) です。

古いブラウザに未対応やElectron向けの場合は不要です。

インストール方法は、Babel.jsのSetupで、[Webpack]を選択すると表示されます。

Webpackを選択
npm install --save-dev babel-loader @babel/core
webpack.config.common.jsへ追加するコード
babel.config.jsonファイルの作成
npm install @babel/preset-env --save-dev
babel.config.jsonファイルへコードの追加

で、完了します。

[webpack.config.common.js]

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.export = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    assetModuleFilename: 'image/[name][ext][query]',
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

[babel.config.json]

{
  "presets": ["@babel/preset-env"]
}

babelの動作確認

webpackでHtmlWebpackPluginを導入しましたので、テンプレートになる「src/index.html」を作成します。

webpackがindex.htmlを出力フォルダに自動で書き出すため、出力先フォルダにあるファイルを編集することがなくなります。

webpack設定ファイル作成時にプロジェクトフォルダに作成された「index.html」をsrcフォルダに移動するだけでも良いです。

[src/index.html]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Webpack App</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <h2>Tip: Check your console</h2>
    </body>
    
</html>

[src/index.js]の編集
JavaScriptのテンプレートリテラル (テンプレート文字列) - JavaScript | MDNを使って確認します。

import _ from 'lodash';

function component() {
  const element = document.createElement('div');
  // Lodash, now imported by this script
  const myName = 'やる夫';
  const words = 'こまけぇこたぁいいんだよ〜';
  const message = `<br />${myName}の口グセなのか？<br />${words}`;
  element.innerHTML = _.join(['webpack', '動いてるお〜'], ' ') + message;
  return element;
}

document.body.appendChild(component());

npm run start

と表示され、以下のように古いブラウザが理解できるように変換されています。

ここまでの内容は、以下で取得できます。

git clone -b 05_babel-install https://github.com/yaruo-react-redux/yaruo-start-template-react18.git

React18のインストール

Reactは古いブラウザでは動作しないため、babelで変換する必要があります。(古いブラウザを切り捨てる場合は不要)

babel/preset-reactのインストール

babel/preset-reactにあるように

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

で、インストールします。

[babel.config.json]の編集

{
  "presets":  [["@babel/preset-env"], ["@babel/preset-react"]]
}

React18のインストール

React を使うためにインストールするパッケージは、

react(react 本体)
react-dom(DOM へのエントリポイント、React の描画を提供)
の 2 つです。

npm install react react-dom

[package.json]

  "dependencies": {
    "lodash": "^4.17.21",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }

のように、React18がインストールできました。

Reactの動作確認

Reactのエントリーポイントを「src/index.html」へ追加します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Webpack App</title>
    </head>
    <body>
        <h1>Hello world!</h1>
        <h2>Tip: Check your console</h2>
        <div id="root"></div>
    </body>
    
</html>

[webpack.config.common.js]
変更点は、

babel-loaderで、拡張子を(js,jsx)が読み込まれるようにする
resolveの拡張子に「jsx」を追加する。

[index.js]

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <div>
    <App />
  </div>,
  document.getElementById('root')
);

[App.jsx]

import React from 'react';
import _ from 'lodash';


const App = () => {
  const myName = 'やる夫';
  const words = 'こまけぇこたぁいいんだよ〜';
  return (
    <div>
      {_.join(['webpack', '動いてるお〜'], ' ')}
      <br />
      {myName}の口グセなのか？
      <br />
      {words}
    </div>
  );
};

export default App;

npm run start

これで問題無く表示されました。

ここまでの内容は、以下で取得できます。

git clone -b 06_react-install https://github.com/yaruo-react-redux/yaruo-start-template-react18.git

Typescriptのインストール

TypeScriptの導入手順は、本家にあるよう以下の手順で行います。

TypeScript をプロジェクトの dependency に入れる。
TypeScript のコンパイラの設定を行う。
TypeScript 用のファイル拡張子を使用する。
使用するライブラリの型定義をインストールする。

TypeScriptをプロジェクトのdependencyに入れる。

npm install -D typescript

で、インストールできます。

記事執筆時点の2022年4月15日では、4.6.3がインストールされました。

TypeScriptのコンパイラの設定

TypeScriptのコンパイラ設定ファイル「tsconfig.json」を作成します。webpack-cliが作成した「tsconfig.json」がある場合は削除してください。

npx tcx --init

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig.json

で、「tsconfig.json」が作成されました。

コメントアウトされているものは、既定です。

コンパイラのオプションを確認することもできます。

TypeScript開発元のMicrosoft社のReactのお勧めは、こちらになります。

[tsconfig.json]お勧めを考慮して

{
  "compilerOptions": {
    "target": "es2016",        
    "lib": ["es6", "dom"],
    "jsx": "react",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "public",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
}

[webpack.config.common.js]
entryポイントを「index.tsx」へ変更し、ts-loaderが先に読み込まれるように変更します。

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports= {
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "public"),
    assetModuleFilename: 'image/[name][ext][query]',
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", "jsx"],
  },
};

TypeScript 用のファイル拡張子を使用する

index.js ---> index.jsx
App.jsx ---> index.tsx

使用するライブラリの型定義をインストールする

package.jsonのdependenciesを確認すると、「lodash」,
「React」、「React-dom」パッケージがインストールされていますので、「node.js」の型定義を追加してインストールします。

npm install -D @types/lodash @types/node @types/react @types/react-dom

これでTypeScriptのインストールが完了しました。

npm run start

で、動作確認します。

ここまでの内容は、以下で取得できます。

git clone -b  07_typescript https://github.com/yaruo-react-redux/yaruo-start-template-react18.git

eslint、prettireのインストールと設定

eslint

eslintは、決められたルールから外れたコードを指摘、修正してくれる優れものです。

prettier

prettierは、コードをフォーマットしてくれる優れものです。

これらも導入すると開発環境が完成したと言えるでしょう。

「eslint」「prettier」のインストール方法や詳しい設定方法は、以下の書籍にあります。

←中編　　　　　　　終編→