babel配置问题

作用

babel的作用是把jsx，ts，es678等编译成可以被浏览器使用的es5.

配置文件.babelrc 默认不会进行编译。

preset是plugin的数组。

@babel/preset-env 转换es678 到es5
@babel/preser-react 转换react
@babel/preset-typescript
@babel/preset-flow

由于并不是要适配所有的浏览器，所以很多的plugin并不需要，所以preset是可以配置的。

polyfill的引用

要使项目兼容浏览器，不仅是语法的兼容，还有新的成员，Set，Map，Symbel，新的API等。

polyfill有两种配置方法，一种直接在文件中import @babel/polyfill,配置方法：useBuiltIns: entry
另一种是在对象上添加。useBuiltIns: usage

。。。

@babel/cli 命令行工具
@babel/core 把es678 转换成es5

配置文件

{
    "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"]
        }
    }
}