// npm install @babel/core @babel/cli @babel/preset-env -D
// npm install @babel/polyfill -S
// npm install @babel/runtime-corejs2 -D
// 文件1:polyfill.js
// import 'babel-polyfill'
console.log([1, 2, 3].includes(2))
console.log(Object.assign({}, {a: 1}))
console.log(Array.from([1,2,3]))
//文件2: babel.config.js
const presets = [
 ["@babel/env", {
 targets: {
 node: '0.10.8',
 // node: 'current'
 },
 useBuiltIns: 'usage'
 }]
];
const plugins = [
 ["@babel/plugin-transform-runtime", {
 "corejs": 2, 
 "helpers": true,
 "regenerator": true,
 "useESModules": false
 }]
]
module.exports = { presets, plugins };

// npx babel ./polyfill.js -d dist 得到
"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
var _from = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/array/from"));
var _assign = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/assign"));
// import 'babel-polyfill'
console.log([1, 2, 3].includes(2));
console.log((0, _assign.default)({}, {
 a: 1
}));
console.log((0, _from.default)([1, 2, 3]));
// node dist/polifill.js 得到
true
{ a: 1 }
[ 1, 2, 3 ]

# babel-node 默认是加载了 babel-polyfill 的,所以各种新的API 都能用。
npm i -g babel-cli
#babel7的cli安装方式
npm install --save-dev @babel/core @babel/cli 
babel-node es6.js

// index.js
require('babel-register')
...
require('./abc.js') // abc.js可以用ES6语法编写,require时会自动使用babel编译

# 编译 example.js 输出到 compiled.js
babel example.js -o compiled.js
# 或 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s

npm install babel-core --save-dev // 老版本的babel
npm install @babel/core --save-dev // babel7
var babel = require("@babel/core");
import { transform } from "@babel/core";
import * as babel from "@babel/core";
babel.transform("code();", options, function(err, result) {
 result.code;
 result.map;
 result.ast;
});

{
 module: {
 loaders: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: [
 {
 loader: 'babel-loader',
 options: {
 presets: ['es2015']
 }
 }
 ]
 }
 ]
 }
}

// 这只能通过 babel-polyfill来转译,因为 babel-polyfill 是直接在原型链上增加方法。
'!!!'.repeat(3);
'hello'.includes('h');

console.log({ ...a });
// 编译后是:
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
console.log(_objectSpread({}, a));
// 然后我们会有很多文件,每个文件都引入一遍 helper 方法,会有很多冗余。所以我们通常会使用 @babel/plugin-transform-runtime 来复用这些 helper 方法。
// 在 .babelrc 里配置:
{
 "plugins": [
 "@babel/transform-runtime"
 ]
}
// 编译后是:
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
console.log((0, _objectSpread2.default)({}, a));

// .babelrc的配置说明: 
{
 "presets": [
 // 预设, Babel 插件的组合套餐
 // 插件的执行顺序:
 // 插件在 Presets 前运行。
 // 插件顺序从前往后排列。
 // Preset 顺序是颠倒的(从后往前)
 "@babel/preset-react",
 // 支持react特有的一些语法,如jsx等
 ["@babel/preset-env", {
 "modules": false, 
 //该参数的含义是:启用将ES6模块语法转换为另一种模块类型/模块的导入导出方式。将该设置为false就不会转换模块。默认为 auto, 基本会是'commonjs'。
 //该值可以有如下:'amd' | 'umd' | 'systemjs' | 'commonjs' | auto | false
 //设置为false的原因: 以前我们需要使用babel来将ES6的模块语法转换为AMD, CommonJS,UMD之类的模块化标准语法,但是现在webpack都帮我做了这件事了,所以我们不需要babel来做,因此需要在babel配置项中设置modules为false,这里导成其他的模块类型也没问题,因为webpack的模块支持这些方式。
 "targets": {
 // tagets 指支持的运行环境
 // 运行环境: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron
 // 如果不设置,就相当于声明了所有ES2015+的plugin
 "browsers": ["last 2 versions", "safari 7", "chrome": 49], 
 // 支持每个浏览器最后两个版本和safari大于等于7版本所需的polyfill代码转换。
 // 支持chrome49所需的polyfill代码转换。
 "node": "current"
 // 如果通过Babel编译Node.js代码的话,可以设置 "target.node" 是 'current', 含义是 支持的是当前运行版本的nodejs。
 },
 "loose": false,
 // 含义是:允许它们为这个 preset 的任何插件启用"loose" 转换, 默认为false。
 // babel编译时,对class的属性采用赋值表达式,而不是Object.defineProperty(更简洁)
 // 默认情况下,当在 Babel 下使用模块(module)时,将导出(export)一个不可枚举的 __esModule 属性。 
 "useBuiltIns": "usage",
 // "usage" | "entry" | false, 默认是false
 // entry的含义是找到入口文件里引入的 @babel/polyfill,并替换为 targets 浏览器/环境需要的补丁列表。
 // usage指按需引入。
 // false指不动态添加polyfills,并且不转译 import "core-js" 和 import "@babel/polyfill",会引入全部的polyfills。
 "corejs": 2, 
 // 新版本的@babel/polyfill包含了core-js@2和core-js@3版本,所以需要声明版本,否则webpack运行时会报warning,此处使用core-js@2版本
 "debug": false,
 // 是否在转码时打印debug信息
 "include": [], // 总是启用的 plugins, 可以让babel加载指定名称的插件。
 "exclude": [], // 强制不启用的 plugins,可以让babel去除指定名称的插件。
 "forceAllTransforms": false, // 强制使用所有的plugins,用于只能支持ES5的uglify可以正确压缩代码
 }]
 ],
 "plugins": [
 [ "transform-runtime", {
 // enables the re-use of Babel's injected helper code to save on codesize.
 "corejs": false, 
 // 默认false,或者数字:{ corejs: 2/3 },代表需要使用corejs的版本。
 // 如果是false则使用@babel/runtime,如果是2则使用@babel/runtime-corejs2,除了runtime中的helpers,另外含有Promise,Symbol等。
 "helpers": true, // 默认是true,是否替换helpers。
 "polyfill": false, // v7无该属性
 "regenerator": true, // 默认true,generator是否被转译成用regenerator runtime包装不污染全局作用域的代码。
 "useBuiltIns": false, // v7无该属性
 "useESModules": false, // 默认false,如果是true将不会用@babel/plugin-transform-modules-commonjs进行转译,这样会减小打包体积,因为不需要保持语义。
 "absoluteRuntime": false
 }],
 [ "import", { "libraryName": "antd", "style": true } ]
 ]
 "env": {
 "development":{
 "plugins": [ "dva-hmr" ]
 },
 "production": {}
 }
}

//useESModules: false
exports.__esModule = true;
exports.default = function(instance, Constructor) {
 if (!(instance instanceof Constructor)) {
 throw new TypeError("Cannot call a class as a function");
 }
};
//useESModules: true
export default function(instance, Constructor) {
 if (!(instance instanceof Constructor)) {
 throw new TypeError("Cannot call a class as a function");
 }
}

/// input
var a = new Promise(); // a.js
var b = new Map(); // b.js
/// output
// a.js
import "core-js/modules/es6.promise";
var a = new Promise();
// b.js
import "core-js/modules/es6.map";
var b = new Map();

// input
import "@babel/polyfill";
// output
import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";

// 1, 安装的需要的全部依赖。
// npm insall babel-loader@8 @babel/core @babel/preset-env -D
// npm install @babel/polyfill
// 2, 在js代码第一行import '@babel/polyfill',或在webpack的入口entry中写入模块@babel/polyfill。
// 3, 配置文件.babelrc
{
 "presets": [
 [
 "@babel/preset-env",
 {
 "modules": false, // 推荐
 "useBuiltIns": "entry", // 推荐
 "browsers": ["last 2 versions", "safari 7", "chrome": 49]
 "corejs": 2, 
 // 新版本的@babel/polyfill包含了core-js@2和core-js@3版本,所以需要声明版本,否则webpack运行时会报warning,此处使用core-js@2版本
 }
 ]
 ],
 "plugins": []
}

// 1, 安装的需要的全部依赖。
// npm insall babel-loader@8 @babel/core @babel/preset-env -D
// npm insall core-js regenerator-runtime
// 2, 在js代码第一行,或者入口文件中引入相应的polyfill
// import "core-js/stable"
// import "regenerator-runtime/runtime"
// 3, 配置文件.babelrc
{
 "presets": [
 [
 "@babel/preset-env",
 {
 "modules": false,
 "useBuiltIns": "entry", 
 "browsers": ["last 2 versions", "safari 7", "chrome": 49]
 // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
 // https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md
 "corejs": {
 "version": 3, // 使用core-js@3
 "proposals": true,
 },
 "debug": false
 }
 ],
 "@babel/preset-react",
 "@babel/preset-flow"
 ],
 "plugins": [
 "dva-hmr",
 // 动态导入, 异步加载语法编译插件
 "@babel/plugin-syntax-dynamic-import",
 // 可以使用 export v from 'mod'
 "@babel/plugin-proposal-export-default-from",
 // 装饰器
 [
 "@babel/plugin-proposal-decorators",
 {
 "legacy": true
 }
 ],
 // 类属性, 实例属性
 [
 "@babel/plugin-proposal-class-properties",
 {
 "loose": true
 }
 ],
 // antd支持
 [
 "import",
 {
 "libraryName": "antd",
 "style": true
 }
 ]
 ]
}