es 6とnodejsとeslint(バベルなしで)に乗ること!

イントロ

それで、私はノード-急行- mongoサーバのboilerplateを作っているので、そのノードがデフォルトでES 6モジュールをサポートしていることがわかりました!)
このポストは、ES 6サポート、eslint構成と若干のハックでそのようなプロジェクトを作成するプロセスを経験します:P

注意:

This tutorial involves setting the --es-module-specifier-resolution=node\" flag in the command line of node, which is an experimental flag. This is the 'hack' mentioned above. This is done in order to omit the '.js' file extension while importing modules. However, if you are uncomfortable with experimental tags, you could either use '.js' extensions everywhere in the code or use Babel.

E 6 ?

ES 6モジュールをサポートすることは、次のことができることを意味します.

import Stuff, {some, other, stuff} from 'some/library';
export thing;
export default anotherThing;

これは、1の単調さを壊すrequire() とIMO、これは非常にクリーンな構文です.以前に、あなたがこれをしたいならば

TS(それは良いことであるかもしれませんが、実行の前に余分な「ビルド」ステップを加えます、そして、このパターンがフロントエンド開発のために十分である間、それは完全にショーキラーです).

Babelライブラリを使用して、あなたのES 6コードを等価CommonJSコードに移します.

Note that although these statements are supported, currently they map to their require() and module.exports equivalents in node, so doing essentially the same thing as Babel, but with no extra dependencies.
Also, using import and export is the correct way forward, because at some point of time in future, node is going to adopt this way of using modules and not completely relying on require().

Also, did I mention that using import and exports is faster than require() ? :)

さあ、コードを始めましょう.

プロジェクト設定

ノート

This tutorial will guide you in making a simple, barebones node app with es6 support. I will not be including any other stuff like express, extra dependencies etc. for the sake of simplicity.

Aを行うnpm init 基本パッケージを取得します.JSON :

{
  "name": "es6-api",
  "version": "1.0.0",
  "description": "es6-api",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "es6",
    "api"
  ],
  "author": "",
  "license": "ISC"
}

今、我々はいくつかのものを追加する必要がありますpackage.json :

ES 6モジュールのサポートを追加するには、"type": "module" あなたにpackage.json .

加える"dev" 文字列"scripts" プロパティ:"dev":"node --es-module-specifier-resolution=node src/index.js"

チェンジ"main": "index.js", to "main": "src/index.js", srcを作成し、ファイルに触れるindex.js それで.

あなたpackage.json 次のようになります.

ランnpm install eslint && npx eslint --init ルートディレクトリ(package . jsonが格納されている場所)でeslintを設定します.
あなたの選択に応じてすべての質問に答えます.「どんなタイプのモジュールがあなたのプロジェクトを使用するか」を設定してください' ESM 'に.これらは私の選択でした、しかし、あなたのものは異なるかもしれません:

これは、.eslintrc.json ルートディレクトリ内でEslintのローカルコピーをインストールするnode_modules ディレクトリ.
オープン.eslintrc.json そして、次のような設定が表示されます.

さて、ここではESRMの設定でESLILTの作業を行うためにいくつかの変更を加える必要があります.
まず、行を追加する"es6": true に"env" 値.次に、新しいプロパティを作成します"globals" を追加します."__dirname": true . これでコードの後半に来ます.
設定は次のようになります.

eslintが設定されているので、我々は先に行くことができますsrc/index.js ファイル.次のコードを追加します.

// src/index.js

import path from 'path';

global.__dirname = path.resolve('./');
console.log(__dirname);

このコードは2つのことを行います.

我々が実際に利用できることを確かめるimport 文.

ESMのノードでは、__dirname グローバルスコープ内では通常はApacheが定義されています.これらの2つのステートメントは、再びグローバルスコープで利用可能になります.我々はまた、ラインを追加通知"__dirname": true イン.eslintrc.json . それがなければ、eslintはエラーを与えます.

私たちのスターターコードが準備できたので、ルートディレクトリに戻り、実行しますnpm run dev . 次の出力を取得します.

もののエクスポート

我々自身のモジュールを作って、ものを輸出しようとしましょう.
ディレクトリを作るexample にsrc ディレクトリ.ファイルインデックスをタッチします.内部のJSと次のコードを追加します.

const value1 = 99;
const value2 = 100;

export { value2 };
export default value1;

ここでモジュールを作り、エクスポートしますvalue1 デフォルトのエクスポートとしてvalue2 名前付きエクスポートとして.また、これらの値をメインインデックスにインポートします.js
コードを置き換えるsrc/index.js by

import path from 'path';
import value1, { value2 } from './example';

global.__dirname = path.resolve('./');
console.log(value1, value2);

さて、プロジェクトは次のようになります.

ランnpm run dev そして、あなたは見なければなりません

> [email protected] dev /home/tushar/src/tmp/tut/es6-api
> node --es-module-specifier-resolution=node src/index.js

99 100

それは、私たちのES 6モジュールがBabelを使用せずにノードで正常にロードされたことを確認します!

脚注

ESMを使用して野生に行くことができますawait import(...) , モジュールエイリアス、CommonJSモジュールをインポートしていますが、この記事の範囲外です.
また、以降import 今現在も同じrequire() , 基本的にJSONファイルからデータを書き込むことができますawait import('file.json') .
このチュートリアルが好きか、いくつかの提案がある場合は、以下のコメントをドロップしてください.お読みありがとうございます.さようなら、いい一日を.