必须知道的Babel知识点

309 阅读1分钟

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 数组。