关于前端: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"]
        }
    }
}