ECMAScript 6(1)Babel
目录
1. Babel
1. 简单来说,就是可以把ES6的代码转换成ES5的代码,这样你就可以在ES5的环境中运行ES6而不必担心兼容性了;
2. ES7的转换也可以靠这个来完成;
3. 其是放置在node_modules文件夹下的插件,就像使用其他通过npm install安装的插件一样使用;
4. 默认只转换语法,不转换API。比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
2. 使用步骤
1. 配置 .babelrc 文件
文件内容
1. 在项目的根目录下创建一个文件,文件名是.babelrc,记得放在项目根目录(一般是和package.json还有readme.md同一个目录下);
2. 注意1:上面那个文件,在windows下不能直接创建(会提示说必须输入文件名),
解决方法1:用linux、mac或者用IDE(比如webstorm)来创建;
解决方法2:从我的github中直接下载文件
3. 注意2:那个文件的babelrc就是后缀名,而不是txt格式的(所以会提示没有文件名);
4. 用编译器打开(或者用记事本打开也行,注意编码格式是UTF8),文件内基本格式如下:{
"presets": [],
"plugins": []
}5. 这个文件用于设置转码规则和插件;
6. presets是转码规则,值的数组里面,填写规则;
7. plugins是插件,有需要就写,不需要的话这个可以省略;
8. 按需安装转码规则(见下面);
9. 将对应的字符串添加到.babelrc中;
10. 运行转码命令/内嵌到package.json里在项目运行时转码;
2. 安装依赖
npm , cnpm , yarn 都行
3. 执行命令
yarn build 或者 npm run build
原文件 input
输出文件 output 转译成功
这是文件目录
ps : 也可全局安装 babel
1. 单文件转换
终端命令 : babel input.js -o output.js
同目录下自动生成output.js,文件内容是上面的转换结果 -o表示--out-file,即输出为文件
2. 文件夹转换
终端命令 : babel input -d output (将一个目录下的所有文件(递归执行)全部转码输出到某个文件夹下(同名转换))
-d表示--out-dir,即输出到文件夹,前面的input表示输入文件夹名,后面的output表示的是输出的文件夹名;
输出:output目录被创建,里面有input文件夹下的同名input.js,但内容是转换后的
input文件下所有文件都会被转换,转换过程是递归的(即子文件夹下的子文件,甚至更深层也会被转换);
一般情况下不推荐全局
参考文献 : 阮一峰 ES6