babel

1、语法转换
2、通过Polyfill实现新特性
3、源码转换codemods

配置babelrc

{
  // 转码规则
  "presets": [
      "@babel/env",
  ],
  "plugins": []
}

@babel/preset-env

npm install --save-dev @babel/preset-env

命令行转码

npm install --save-dev @babel/cli

npm npx

1、npm是安装软件包依赖和package.json绑定
2、npx是执行npm安装包，代替安装包的bin

指令

制定输出文件
npx babel 源文件 -o/—out-file 输出文件
npx babel 源文件夹 -d / —out-dir 输出文件夹
生成sourcemap文件（代码位置信息文件）
npx babel 源文件夹 -d / —out-dir 输出文件夹 -s

REPL

node的repl（real-eval-print-loop）交互式解析器

npm install --save-dev @babel/node

babel-register

开发环境，引入.js，.jsx，.es，.es6，实时转码;

npm install --save-dev @babel/register
//必须先引入@babel/register
require('@babel/register');

polyfill

默认只转换语法，而不转换新的jsAPI

npm install --save-dev core-js regenerator-runtime
// 先引入解析api垫片
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime);

不支持的API：可查看 babel-plugin-transform-runtime definitions.js文件

浏览器环境

开发环境，生产环境，影响性能

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

Code

简介