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