Node+Baby左突き右突き😂

問題が発生💣

うちの会社はノードです.jsを使用して構築されたサーバを使用してAPIにサービスを提供します.しかし、先日ES 6を超える文法を使っていたときにエラーが発生しました.ちょうど業務に余裕がある時、聞いてから解決することにしました.

問題の原因を特定🤷‍♂️

package.jsonを開き、Babyに関連するモジュールバージョンを表示します.同様に,@babel/prefet-envバージョンはCARAT(^)を使用せず,過去バージョンに固定されている.@babel/prefet-env、@babel/coreをすぐに最新バージョンにアップグレードします.
しかし、最新のES構文はサポートされておらず、エラーが発生しています.🤦‍♂️ 突然、サーバーが滑らかではないかと疑う人がいました.リュックサック-コアを使用してバンドル中babelrcファイルを読み込み、古い構文で変換しています.原因はわかりませんが.babelrcファイルを正常に読めないようで、関連する参考資料を探すためにあちこち走り回っています...
突然、サーバはパッケージをバンドルする必要がありますか?という考えが生まれた.実行時がブラウザの場合、Webpackなどのバンドルツールを使用してユーザーの可用性を向上させますが、実行時がNodeの場合、バンドルする必要はありますか?直接指導者に聞いた.指導者は私の意見と同じだ.

問題を解決する💡

不要な束を除去

以前使っていたリュックを収納することにしました.開発環境では、リュックサックはwebpack dev serverと同様にhot-loader機能を提供しています.この部分をbabel-watchモジュールに変更しました.

.babelrc修正

{
  "presets": ["@babel/env"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./server"],
        "alias": {
          "@framework": "./server/framework",
          // ...
        }
      }
    ],
    "@babel/plugin-transform-runtime"
  ]
}

修正のついでにPath aliasにmodule-resolverプラグインを適用しました.eslintはpathにエラーを出すのでimport/resolverをeslintc,jsconfigにも適用する必要があります.jsonドキュメントも修正する必要がありますが、今回のリリースでは触れません.

package.jsonスクリプトの変更

"scripts": {
  "build": "node build.js && babel --extensions .ts src -d dist",
  "start": "npm run build && node ./dist/index.js",
  "dev": "babel-watch --extensions .ts src/index.ts"
},

"dependencies": {
  "@babel/runtime": "^7.17.2",
  // ...
}
  
"devDependencies": {
  "@babel/cli": "^7.17.3",
  "@babel/core": "^7.17.2",
  // "@babel/node": "^7.16.8",
  "@babel/preset-env": "^7.16.11",
  "babel-plugin-module-resolver": "^4.1.0",
  "babel-watch": "^7.7.0",
  // ...
}

devDependencyについて簡単に説明します.

@babel/cli:コマンドラインでbabelを有効にするモジュール

@babel/core:Babelコアパッケージ

@babel/node:開発環境でbabelを使用するためのモジュール

@babel/prefert-env:構文変換に必要なプラグインの集合で、実際にコード変換を実行する

@babel/plugin-transform-runtime:polyfillモジュール(@babel/polyfillは廃棄済み)

babel-plugin-module-resolver:上記path aliasを適用するモジュール

babel-watch:開発環境でソースコード変更を行う際に再ロードするためのモジュール

@babel/nodeを使用する際の注意点

You should not be using babel-node in production. It is unnecessarily heavy, with high memory usage due to the cache being stored in memory. You will also always experience a startup performance penalty as the entire app needs to be compiled on the fly.

要するにbabel-nodeは生産環境で使用すべきではない.babel-nodeは重く、キャッシュによりメモリが大量に消費されるため、開発環境でのみ使用できます.

Nodemon+babel/node使用中に問題が発生!!(2022-02-21)

Nodemon+babel/nodeの組み合わせを再ロードする時間が長すぎます.ㅠㅠ(約30秒かかる)開発者は、変更を保存するたびにbabel/nodeがファイル全体を転送します.この過程は長すぎて不便だ.
この問題を解決するためにbabel-watchモジュールを用いた.

babel-watch description: babel-watch only starts babel in the "master" process where it also starts the file watcher. The transpilation is performed in that process too. On file-watcher events, it spawns a pure node process and passes transpiled code from the parent process together with the source maps. This allows us to avoid loading babel and all its deps every time we restart the JS script/app.

変更時にコード全体をTranspileに変換するのではなく、関連するソースコードのみにTranspileを実行させます.

なぜNodeにBabelを適用したのですか?🤷‍♂️

NodeバージョンによってES構文のサポート範囲が異なります.上の画像から、ES 2020文法はネックレスオペレータ(?.)を選びます.Node 12バージョンでは動作しません.最新の構文を使用する場合、Nodeバージョンの依存性を回避するためにBabelが使用されます.