web-dev-qa-db-ja.com

Node JSを使用してBabel 6をセットアップし、サーバーサイドコードでES6を使用するにはどうすればよいですか？

で提供されているドキュメントを何度か読みました： Node API Babel 6 Docs

Learn by Exampleチュートリアルに従ってpg-promiseの学習を始めており、ES6で作業し、BabelでES5にトランスパイルすることを好みますが、いくつかのことはわかりません。

  1. Babel-coreをインストールした後、どのプリセットを使用し、どこで/どのように設定して機能するのですか？

ドキュメンテーションは、私がどのファイルを置くかについて不明瞭でした：require（ "babel-core"）。transform（ "code"、options）;and andそのコードのどの部分がプレースホルダーです。そのコードを使用するとき、どこかで一度使用するだけで、他のすべてのファイルでES6を使用できますか？これはどのように達成されますか？

  1. この.babelrcファイルについて読み、実際のファイル名が「.babelrc」であるか、それが単なるファイル拡張子であり、プロジェクトのルートディレクトリに関連してどこにそのファイルを置くかを確認したいと思います。リンクしますか？

  2. pg-promise を使用している場合、ES6とBabelを使用するか、実行する必要があります：Testingpg-promiseのセクションで十分であり、これでES6を使用しようとすると、さらに問題が発生しますか？

サーバー側の開発中に必要になった場合、letとconstを活用したいと考えていました。

  1. Node + babel + pg-promiseサーバーのセットアップに標準的なファイル構造はありますか？

Edit私も Node JS with Babel-Node を読んでおり、これを使用することは避けるべきであることに気付きました。一番下の最後の答えは、Babelが提供する実際のドキュメントを読むのに苦労しているのと同じ理由で、私には本当に意味がありませんでした。

node.jspostgresqlbabeljspg-promise
34
Jax Cavalera

1.aどのプリセットが必要ですか？

コマンドプロンプトなどのターミナルウィンドウを使用して、プロジェクトのルートディレクトリに_npm install babel-core --save-dev_を指定して最初にBabelをインストールする必要があります。

インストールしたら、npm install babel-preset-es2015 --save-dev_でes2015プリセットをインストールする必要があります。 Babel-CoreはPromises/A +に準拠していますが、エラー処理が不十分であるため使用に理想的ではありませんこの目的のために、代わりにBluebirdを使用する必要があります。トランスパイルするには、引き続きbabel-coreをインストールする必要があり、es2015ではES6-> ES5トランスパイルが有効になるため、letやconstなどの派手なものを使用できます。

1.b require("babel-core");を置く場所

代わりに、require("babel-core/register");を使用して、通常は"server.js"と呼ばれるEntryファイル内に配置します。 server.jsファイルは、CommonJS（ES5）を排他的に使用する必要があります。

"require"ステートメントを使用すると、関連するすべての変換が、必要なすべてのコードにEntryファイルとすべてのファイルに適用されます。これらのファイルに必要/含まれています。

_"main":_セクションの下のpackage.json内のEntryファイルをポイントします。

Package.jsonは、ターミナルウィンドウ内のプロジェクトのルートディレクトリで_npm init_でプロジェクトを初期化すると作成されます

これに対する1つのアプローチは次のとおりです。

  • エントリーファイル-server.js
  • server.js-{babel-coreおよびメインES6ファイル：config.js/jsx/es6/es}が必要です
  • config.es6-ES6を使用し、ES6にロードされることでトランスポートされるときにES6も使用できる他のすべてのプロジェクトファイルにinclude（requires）があります- "config" babel-coreによって直接変換されるファイル。

2. .babelrcとは何ですか？

_.babelrc_はファイル名であり、package.jsonファイルと同じフォルダー（通常はルートディレクトリ）に配置する必要があり、どのプリセットまたはプラグインを決定するためにbabel-coreが必要になると自動的に「ロード」されます使用される。

_.babelrc_内に、次のコードを追加する必要があります。

_{
  "presets": ["es2015"]
}
_

3. pg-promiseテストセクション

開発者からの直接の引用は最近これに答えました

テストの手順について心配する必要はありません。インストールの手順のみを使用してください。テストの1つは、テストを実行するためのdev依存関係のインストールに関連しています。 pg-promiseは、Promises/A +仕様に準拠する任意のpromiseライブラリで動作します。

4.サーバー側プロジェクトの標準ファイル/フォルダー構造？

各プロジェクトには固有の要求があるため、このタスクを達成する標準的な方法はありません。適切な出発点は、プロジェクトルートディレクトリにEntryファイルを配置し、ES6 Config「scripts」または「src」サブフォルダー内のファイルと、その下のフォルダー内の個々のコンポーネント。

例えば.

  • ROOT/server.js
  • ROOT/src/config.es6
  • ROOT/src/component1/files.es6
  • ROOT/src/component2/files.es6

これにより、BabelはすべてのES6をES5に正常に変換し、A +準拠の約束のサポートを有効にします。

Node.js Webサーバーの使用を開始するには、 このガイド により少し洞察が得られ、この回答のコンテキストでは、示されているコードがES6 config.es6ファイルに配置され、次のコードがエントリserver.jsファイル：

_require("babel-core/register");
require("./src/config.es6");
_

Isomorphic Webアプリケーションを構築するプロセスはこれとは異なり、おそらくgrunt、gulp、webpack、babel-loaderなどのようなものを使用します。その別の例は Found Here です。

この回答は、この質問に対する他の回答と、経験豊富な開発者や私自身の研究とテストからの貢献によって提供されるいくつかのキーポイントの組み合わせです。この回答の作成を支援してくれたすべての人に感謝します。

45
Jax Cavalera

  1. この答えは、この単純なディレクトリ構造を使用しています

    project/server/src/index.js =>サーバーファイル

    project/server/dist/ => babelがあなたの変換されたファイルを置く場所

  2. Babel依存関係をインストールする

    npm install -g babel nodemon

    npm install --save-dev babel-core babel-preset-es2015

  3. これらのnpmスクリプトをpackage.jsonファイルに追加します

    "scripts": { "compile": "babel server/src --out-dir server/dist", "server": "nodemon server/dist/index.js }

  4. プロジェクトのルートディレクトリに.babelrcファイルを作成します。

    { "presets": "es2015" }

  5. でディレクトリを変換します

    npm run compile

  6. でサーバーを実行する

    npm run server

6
Isaac Pak

Gruntやgulpなどのツールを使用して、すべての「ビルド」タスクを管理する必要があると思います。自動的に自動化され、エラーは発生しません。

1つのコマンドで、コードをbabel ES2015に変換し、アプリケーションを開始できます。

この単純なプロジェクト をご覧になることをお勧めします。 （node_modulesをインストールし、npm startを起動してapp.jsファイルを開始するだけです）

ただし、手動でbabelを使用する場合は、

  • .babelrcはファイルの名前です。 this project（redux） で例を見ることができます。

  • .babelrcは設定ファイルです。動作を確認したい場合は、 this package.json（always redux）

  • 実際、私が知っている標準的な方法はありません。必要に応じて以下のプロジェクトスケルトンを使用し、プルリクエストを送信して改善できます:-)

0
mfrachet

@それを簡単に

ステップ1

npm install nodemon --save

プロジェクトディレクトリ内

ステップ2

yarn add babel-cli

yarn add babel-preset-es2015

ステップ：2 package.json-> sciptsで、「start」を次のように変更します

start: "nodemon src/server.js --exec babel-node --presets es2015"

ステップ：3

yarn start
0
Aslam Shaik