Babel7の簡単な使用

初期化

空のフォルダcmdの下に新しい空のフォルダを作成してnpm init -y、新しいプロジェクトを初期化します

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

• 
  コマンドラインコンパイラファイルの@ babel / cli 公式ドキュメントアドレス
• @ babel /
  Babelのコアコア、各種変換方法はこちらの公式ドキュメントアドレスに記載されています
• @ babel / preset-envは
  jsをインテリジェントにコンパイルします。サポートするブラウザの範囲を指定するだけで、インテリジェントにコンパイルできます。公式文書アドレス

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

構成ファイルを追加

.babelrc

{
    "presets": ["@babel/preset-env"]
}

.browserslistrcは、コンパイルされたjsがサポートするブラウザーの範囲を指定するために使用されます

"> 1%"

package.jsonのスクリプトを追加

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

テストファイルを追加

新しいsrcフォルダーを作成し、test.jsをフォルダーに追加して、簡単なes7コードを記述します。

function box(){
    
    
	new Promise((resolve,reject)=>{
    
    
		setTimeout(()=>{
    
    
			return resolve(135300)
		})
	})
}

async function test(){
    
    
	let a = await box()
}
console.log(test())

ファイルディレクトリ

走る

npm run babel

dist / test.jsファイルをチェックして、コンパイルされたjsを確認します