バベルの構成と使用

第一歩

コアパッケージとコマンドラインツールをインストールするバベル

npm install @babel/core   // babel 核心
npm install @babel/cli   // babel 命令行工具

第二のステップ

バベル予め設定された構成とプラグイン文法のインストール

npm install @babel/preset-env   // Es6+ 语法
npm install @babel/preset-react   // React 语法
npm install @babel/plugin-proposal-class-properties   // 支持类属性

第三段階

ルートディレクトリに作成し、編集するファイル.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
        {
            "useBuiltIns": "entry",
            "corejs": 3
        }
        ],
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

第四段階

インストールバベル、ポリフィル

npm install @babel/polyfill

第五の工程

htmlファイル、ポリフィル導入、変更パスJS

<script src="./node_modules/@babel/polyfill/browser.js"></script>
<script src="dist/main.js"></script>

ステップ6

バベルの実装は、通常の動作かどうかを確認するためにアプリケーションをコンパイル

npx babel src --out-dir dist   // 生成 dist 目录，里面有编译后的 js 文件

NPMバージョン5.2以上であってもよい./node_modules/.binと略しますnpx

--out-dir distパラメータは、全体のコンパイルができsrcたディレクトリに、出力にファイルをdistディレクトリ