Babel

ES2020 を使いたい場合、Babel でトランスパイルする必要がある。

ここでは webpack には関係なく、サーバー環境で node を使う時に ES2020 が使える状況にする。

対象

Babel 7.8

npm の場合

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env

yarn の場合

$ yarn add --dev @babel/core @babel/cli @babel/preset-env

code:txt

info Direct dependencies

├─ @babel/cli@7.8.4

├─ @babel/core@7.8.4

└─ @babel/preset-env@7.8.4

babel.config.js を作る。

code:babel.config.js

const presets = [

];

module.exports = { presets };

トランスパイルしたファイルはどのディレクトリに入れるのが望ましいのか?

特に標準がない。

よく使われているのは dist, lib

ライブラリは lib に入れた方がよさげ。

package.json にトランスパイルの処理を追加する。

code:package.json

{

...

"scripts": {

"babel": "babel src --out-dir dist"

},

...

}

package.json の main にはトランスパイル後のエントリポイントの JavaScript を書く。

必要に応じて "private": true を追加。(うっかり公開しないように)

code:package.json

{

...

"main": "dist/main.js",

...

}

.gitignore を書いておく

code:.gitignore

node_modules/

dist/

公開する場合、トランスパイルが必要となるため、その処理を "prepare" スクリプトとして設定する。

(汎用性を考えると npm コマンドが限度か)

code:package.json

"scripts": {

"babel": "./node_modules/.bin/babel src --out-dir dist",

"prepare": "npm run babel"

},

files で、publish で添付しなければならないファイルを書く。

npm パッケージにはソースを付ける必要はない。実行に必要なファイルだけがあればよい。

code:package.json

"files": [

"README.md",

"package.json",

"dist",

"test"

],

.npmignore も使えるが、ブラックリスト方式であるために、うっかり新規ファイルを公開するトラブルが出てくることに注意。

.npmignore を書く場合、確実に不要と考えられるものを書いておく。

code:.npmignore

.git*

scripts に test を追加する

code:package.json

"scripts": {

...

"test": "jest"

}