必须知道的Babel知识点

Babel是一个javascript编译器

• 源码转换
• Babel可以通过语法转换器来支持新版本的javascript语法
• Babel可以删除类型注释

npm install --save-dev @babel/core @babel/cli @babel/preset-env
复制代码

在项目根目录下创建一个babel.config.json的配置文件

{
    "presets":[
        [
            "@babel/env",
            {
                "targets":{
                    "edge":17,
                    "chrome":"68"
                },
                "useBuiltIns":"usage" //只包含你所需要的 polyfill
            }
        ]
    ]
}
复制代码

Babel的配置文件可以是 babel.config.json 或者 .babelrc.json 或者在 package.json

{
  "name": "mytest",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
复制代码

Babel和Typescirpt的区别？

typescript本身就可以像babel一样通过配置输出es5代码，那么两者同时存在的意义是什么？
typescript编译器具有可以将target设置为es5/es6来实现，但Babel需要通过babel-preset-env来进行转换，也可列出需要支持的环境browsers:[…];

相比而言babel更加全面可配置些，类如还可以JSX,flow等等只需安装对应的插件；

babel只做语法转化，不做类型检查；

在babel7之前将这两个编译器连接起来是复杂的。
webpack的常见编译流程为：TS=>TS Compiler => js => babel= >js;

好在Babel7后可以使用Babel来串联起之前复杂的webpack loader 流程配置来合并两个编译器；

npm install --save-dev @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
复制代码

typescript中有一些babel需要了解的额外功能，可以通过上面2个插件来补充；
Babel 默认查找 .js 文件，遗憾的是，这在 Babel 配置文件中是不可配置的。
如果你使用 Babel CLI，添加 –extensions ‘.ts’
如果你使用 Webpack，添加 ‘ts’ 到 resolve.extensions 数组。