nodejsがインストールされている状態で以下を実行

% npm create vite@latest my-app-name

フレームワークの選択と進めためからreactを選ぶ

言語を選択する
SWCとはJS/TSのコンパイラ。従来通りのBabelにするかSWCにするか選択する必要がある。ビルド速度を優先したい場合はSWCにする。Babelプラグインを使いたい場合はBabelにする。

選択を終えたら以下のコマンドで開発サーバーが起動しコーディングができるようになる

cd my-app-name
npm install
npm run dev

Nodeのバージョンアップが激しすぎて１年も立つと過去のプロジェクトは最新のNodeで動作しなくなる。プロジェクトを変えるたびにNodeのバージョンを切り替えのは大変手間だが、それを自動的にやってくれるのが「VOLTA」である。

インストール手順

公式サイトを見るとLinuxとMacは次のようにする

curl https://get.volta.sh | bash

Windowsの場合は「download and run the Windows installer」よりインストーラーをダウンロードし実行する

Getting Started | Volta

Getting Started

docs.volta.sh

利用方法

Nodeのバージョンを 14.14.5 にした場合は利用するディレクトリで次の通り実行する。

> volta install node@14.15.5
success: installed and set node@14.15.5 (with npm@6.14.11) as default

>node -v
v14.15.5


> npm -v
6.14.11

既存プロジェクトでNodeのバージョンを指定したい場合

> volta pin node@14.15.5
> volta pin npm@6.14.11

上記コマンドを実行すると「package.json」ファイル内に次の内容が追記され、バージョンが固定される。

  "volta": {
    "node": "14.15.5",
    "npm": "6.14.11"
  }

でWebPack Dev Serverで動作させているぶんには問題ないのだが、いざBuildを行いWebサーバー上でモジュールをデプロイし実行させると以下のエラー

An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling と記載されているので読んで見る。

If you’re using @babel/preset-env in conjunction with browserslist to set target browser environments, consider using the following browserslist queries to select a set of compatible transforms.

https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

Browserlistを以下のようにせよとの事
Babelの設定を変更しトランスパイルされたモジュールの実行対象を絞る必要がある。

>0.2%, not dead, not ie 11, not chrome < 51, not safari < 10, not android < 51

このbrowserlistはpackage.jsonに定義されている。

変更前

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

変更後

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not ie 11",
      "not chrome < 51",
      "not safari < 10",
      "not android < 51"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

これで npm run build したものをWebサーバ上で実行すると無事動作するようになる。

原因はscriptタグによるjsファイルが読み込まれないこと

以下を見直す

package.json

"homepage": "***"

React Routerを使っている場合は以下についても

const router = createBrowserRouter([
    {
        path: "/",
        element: <App/>,
    }
],{
        basename: "***",
});

を実行することで隠蔽されていたWebPack関係のファイルが出現し設定を色々変更する事ができるようになる。

サーバーサイドのスクリプトなんかを同ディレクトリへ配置しておきたい場合困る。

/scripts/build.js を変更することで元ファイルを残すことが出来る

  .then(previousFileSizes => {
    // Remove all content but keep the directory so that
    // if you're in it, you don't end up in Trash
    fs.emptyDirSync(paths.appBuild);

  .then(previousFileSizes => {
    // Remove all content but keep the directory so that
    // if you're in it, you don't end up in Trash
    //fs.emptyDirSync(paths.appBuild);

とのエラーが発生。原因はNodeJSが新しすぎること。

2022/06/22時点の安定版であるNodeJS v16を再インストールすることで解消。

Webpack dev serverが起動しホットリロードで開発ができるようになる。

フロント側の開発ならこれでいいのだが、サーバーサイドの処理や外部APIを利用する場合このままでは都合が悪い。

その場合、特定のパスだけ外部サーバーに飛ばすようにする。
手順は以下の通り

npm install http-proxy-middleware

/src/setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "https://localhost:8080",
      changeOrigin: true,
    })
  );
};

npm start

これで http//localhost/api/***
のリクエストは http://localhost:8080 へリバースプロキシされる。

以下をインストールする事で解消

npm install @emotion/react @emotion/styled

エラー箇所

background-image: url('./images/***.gif');

どうやらコンパイル時にurlで指定されたパスを参照しているらしく、srcフォルダに画像を置いてやることで解消した。