babel構成の問題

1610 ワード

さぎょう
babelの役割はjsx,ts,es 678等をブラウザで使用可能なes 5にコンパイルすることである.
プロファイルbabelrcはデフォルトでコンパイルされません.
presetはpluginの配列です.
@babel/preset-env変換es 678からes5@babel/preser-react変換react@babel/preset-typescript@babel/preset-flow
すべてのブラウザに適応するわけではないので、多くのpluginは必要ありません.presetは構成できます.
polyfillの参照
プロジェクトをブラウザに互換化するには、構文の互換性だけでなく、新しいメンバー、Set、Map、Symbel、新しいAPIなどがあります.
polyfillには2つの構成方法があり、1つはファイルに直接import @babel/polyfill、構成方法:useBuiltIns: entry、もう1つはオブジェクトに追加されます.useBuiltIns: usage
...
@babel/cliコマンドラインツール@babel/core es 678をes 5に変換
プロファイル
{
    "presets": [
        ["@babel/preset-env", {
            "modules": false
        }], 
        "@babel/preset-typescript", 
        "@babel/react"
    ],
    "plugins": [
        "@babel/plugin-proposal-function-bind", 
        "@babel/plugin-proposal-object-rest-spread", 
        "@babel/transform-arrow-functions",
        "@babel/plugin-transform-runtime",
        "@babel/plugin-syntax-optional-chaining",
        ["@babel/plugin-proposal-decorators", {
            "legacy": true
        }],
        ["@babel/plugin-proposal-class-properties", {"loose": false}],
        "@babel/plugin-syntax-dynamic-import",
        ["babel-plugin-transform-class-properties", { "spec": true }]
    ],
    "env": {
        "development": {
            "plugins": ["react-hot-loader/babel"]
        }
    }
}