1.为什么需要babel?Babel 是什么?
(1)Babel 是一个工具链,主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为后兼容版本的JavaScript;
(2)包括:语法转换、源代码转换等;
Babel 命令行使用
babel本身可以作为一个对立的工具(和postcss一样) ,不和webpack等构建工具配置来单独使用。
如果我们希望在命令行尝试使用babel,需要安装如下库:
- @babel/core:babel 的核心代码,必须安装
- @babel/cil: 可以让我们在命令行使用babel
使用步骤:
1.首先得安装
npm install @babel/core @babel/cli -D
2.使用babel来处理我们的源代码:
- src:是源文件的目录;
- --out-dir: 指定要输出的文件夹dist;
npx babel demo.js --out-dir dist
-
3.比如我们需要转换箭头函数,那么我们就可以使用箭头函数转换相关的插件:
-
npm install @babel/plugin-transfrom-arrow-functions -D
使用这个箭头函数转换的插件
-
npx babel demo.js --out-file test.js --plugins
4.块级作用域转换插件(使用方法和上述一样)
-
npm install @babel/plugin-transfrom-block-scoping -D
Babel 的预设preset
-
但是如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset)
-
后面我们在具体来讲预设代表的含义;
-
1.安装@babel/preset-env预设:
-
npm install @babel/preset-env -D
2.使用:
-
npx babel demo.js --out-file test.js --presets=@babel/preset-env