babel命令行使用
-
babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用
-
如果我们希望在命令行尝试使用babel,需要安装如下库
- @babel/core:babel的核心代码,必须安装;
- @babel/cli:可以让我们在命令行使用babel;
npm install @babel/cli @babel/core
-
使用babel来处理我们的源代码
- src:是源文件的目录;
- –out-dir:指定要输出的文件夹dist;
npx babel src --out-dir dist
插件的使用
-
比如我们需要转换箭头函数,那么我们就可以使用箭头函数转换相关的插件
npm install @babel/plugin-transform-arrow-functions -D npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
-
查看转换后的结果:我们会发现 const 并没有转成 var
- 这是因为 plugin-transform-arrow-functions,并没有提供这样的功能
- 我们需要使用 plugin-transform-block-scoping 来完成这样的功能
npm install @babel/plugin-transform-block-scoping -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions
babel的预设preset
- 但是如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset)
- 安装@babel/preset-env预设:npm install @babel/preset-env -D
- npx babel src --out-dir dist --presets=@babel/preset-env
babel的底层原理
- babel是如何做到将我们的一段代码(ES6、TypeScript、React)转成另外一段代码(ES5)的呢
- 从一种源代码(原生语言)转换成另一种源代码(目标语言),这是什么的工作呢?
- 就是编译器,事实上我们可以将babel看成就是一个编译器。
- Babel编译器的作用就是将我们的源代码,转换成浏览器可以直接识别的另外一段源代码
- Babel也拥有编译器的工作流程
- 解析阶段(Parsing)
- 转换阶段(Transformation)
- 生成阶段(Code Generation)
babel-loader
-
在实际开发中,我们通常会在构建工具中通过配置babel来对其进行使用的,比如在webpack中
-
那么我们就需要去安装相关的依赖:npm install babel-loader @babel/core
-
我们可以设置一个规则,在加载js文件时,使用我们的babel:文章来源:https://www.toymoban.com/news/detail-494818.html
module:{ rules:[ { test:/.m?js$/, use:{ loader:'babel-loader' } } ] }
指定使用的插件
module:{
rules:[
test:/.m?js$/,
use:{
loader:'babel-loader',
options:{
plugins:[
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-block-scoping"
]
}
}
]
}
babel-preset
npm install @babel/preset-env文章来源地址https://www.toymoban.com/news/detail-494818.html
test:/.m?js$/,
use:{
loader:'babel-loader',
options:{
presets: [
["@babel/preset-env"]
]
}
}
设置目标浏览器 targets
- 默认适配browserslist,配置的targets属性会覆盖browserslist;
- 但是在开发中,更推荐通过browserslist来配置,因为类似于postcss工具,也会使用browserslist,进行统一浏览器 的适配;
test:/.m?js$/,
use:{
loader:'babel-loader',
options:{
presets: [
["@babel/preset-env",{
target:"last 2 version"
}]
]
}
}
Stage-X的preset
- Stage 0:strawman(稻草人),任何尚未提交作为正式提案的讨论、想法变更或者补充都被认为是第 0 阶段的稻草人”;
- Stage 1:proposal(提议),提案已经被正式化,并期望解决此问题,还需要观察与其他提案的相互影响:
- Staae2:draft(草稿),Staae2的提案应提供规范初稿。草稿。此时,语言的实现者开始观察 runtime 的具体实现是否合理;
- Staae3:candidate(候补),Staae3提案是建议的候选提案。在这个高级阶段,规范的编辑人员和评审人员必
须在最终规范上签字。Staae 3 的提案不会有太大的改变,在对外发布之前只是修正一些问题: - Stage4:finished(完成),进入 Stage4 的提案将包含在 ECMAScript的下一个修订版中;
babel的配置文件
- babel配置文件的两种方式
- babel.config.json(或者.js,.cjs,.mjs)文件;
- .babelrc.json(或者.babelrc,.js,.cjs,.mjs)文件
- 它们两个有什么区别呢?目前很多的项目都采用了多包管理的方式(babel本身、element-plus、umi等);
- .babelrc.json:早期使用较多的配置方式,但是对于配置Monorepos项目是比较麻烦的
- babel.config.json(babel7):可以直接作用于Monorepos项目的子包,更加推荐
到了这里,关于08-babel的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!