../node_modules/.bin/babel --plugins @babel/plugin-transform-typescript,@babel/plugin-transform-modules-commonjs --presets @babel/preset-typescript test.js

./node_modules/.bin/babel --config-file ./babel.config.js ./src/index.tsx

使用攻略

babel 插件制作攻略
https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md

一 构建一个babel环境

Babel可以配置！许多其他工具也有类似的配置：ESLint（.eslintrc），Prettier （.prettierrc）。
允许使用所有Babel API 选项。但是，如果该选项需要JavaScript，则可能需要使用JavaScript 配置文件。
babel.config.js 或是
.babelrc 或是
.babelrc.js

>mkdir my-project
>cd my-project
>npm init
// 一直回车直到结束
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
// babel.config.js
const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];
module.exports = { presets };
// 使用此命令解析js
>./node_modules/.bin/babel src --out-dir lib
--plugins
--presets
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

@babel/core babel的核心

https://babeljs.io/docs/en/babel-core

@babel/cli babel的命令工具

https://babeljs.io/docs/en/babel-cli

@babel/polyfill 自动加入polyfill配合@babel/preset-env插件使用

@babel/preset-env 智能预设，

默认情况下，除非设置了targets或ignoreBrowserslistConfig选项，否则@babel/preset-env将使用browserslist配置源 。

targets ：object

实施例的环境中：chrome，opera，edge，firefox，safari，ie，ios，android，node，electron。

{
  "targets": "> 0.25%, not dead"
}
{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}

旁注，如果未指定目标，@babel/preset-env则默认情况下将转换所有ECMAScript 2015+代码。

targets.esmodules boolean 默认是false

在指定esmodules目标时，将忽略浏览器目标。
您也可以定位支持ES模块的浏览器（https://www.ecma-international.org/ecma-262/6.0/#sec-modules）。指定此选项时，将忽略browsers字段。您可以结合使用此方法有条件地向用户提供较小的脚本（https://jakearchibald.com/2017/es-modules-in-browsers/#nomodule-for-backwards-compatibility）。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

targets.node

string | “current” | true。
如果要针对当前节点版本进行编译，则可以指定”node”: true或者”node”: “current”与之相同”node”: process.versions.node。

targets.safari

string | “tp”。
如果要针对Safari 的技术预览版进行编译，则可以指定”safari”: “tp”。

targets.browsers

string | Array。
使用：查询中选择浏览器（最后2个版本，> 5％，Safari浏览器TP前）browserslist。
请注意，浏览器的结果会被显式项覆盖targets。

spec : boolean 默认为false

为此预设中支持它们的任何插件启用更符合规范但可能更慢的转换。

loose：boolean 默认为false

为此预设中允许它们的任何插件启用“松散”转换。

modules ：string

“amd” | “umd” | “systemjs” | “commonjs” | “cjs” | “auto” | false，默认为”auto”。
启用将ES6模块语法转换为其他模块类型。
将此设置为false不会转换模块。
另请注意，这cjs只是一个别名commonjs。

debug ：boolean 默认为false

输出使用的目标/插件，并在指定的版本插件数据版本来console.log。

include : string[] | RegExp

Array，默认为[]。
一系列总是包含的插件。
有效选项包括：

• Babel插件 - 支持带（@babel/plugin-transform-spread）和不带前缀（plugin-transform-spread）。
  
• 内置插件，例如es6.map，es6.set或es6.object.assign。
  

可以完全或部分指定（或使用RegExp）插件名称。
可接受的投入：

• 全名（string）：”es6.math.sign”
• 部分名称（string）:( “es6.math.*”解析为所有带es6.math前缀的插件）
• RegExp对象：/^transform-.$/或new RegExp(“^transform-modules-.“)

请注意，上述.内容RegExp相当于匹配任何字符，而不是实际’.’字符。还要注意的是，以匹配任何字符.被用来RegExp作为反对的glob格式。
如果本机实现中存在错误，或者不支持的功能+受支持的功能组合不起作用，则此选项很有用。
例如，节点4支持本机类但不传播。如果super与扩展参数一起使用，则@babel/plugin-transform-classes转换需要为included，因为不可能以super其他方式转换扩展。

注意：include和exclude选项仅适用于此预设附带的插件 ; 因此，例如，包含@babel/plugin-proposal-do-expressions或排除@babel/plugin-proposal-function-bind将抛出错误。要使用此预设中未包含的插件，请直接将其添加到“插件”中。

exclude : string[] | RegExp

Array，默认为[]。
一系列总是要排除/删除的插件。
可能的选项与include选项相同。
此选项对于将变换列入黑名单非常有用，例如，@babel/plugin-transform-regenerator如果您不使用生成器并且不想包含regeneratorRuntime（使用时useBuiltIns）或使用其他插件（如fast-async而不是Babel的async-to-gen）。

useBuiltIns : string

“usage”| “entry”| false，默认为false。
此选项配置如何@babel/preset-env处理polyfill。
entry 根据环境不同导入

// 在
import "@babel/polyfill";

// 出
import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";

usage 实验

var a = new Promise();
var b = new Map();
// Out（如果环境不支持）
import "core-js/modules/es6.promise";
var a = new Promise();
import "core-js/modules/es6.map";
var b = new Map();
// 支持的话不变

false 不添加polyfill
不要为每个文件自动添加polyfill，也不要转换import “@babel/polyfill”为单个polyfill。

forceAllTransforms : boolean 默认false

默认情况下，此预设将运行目标环境所需的所有变换。如果要强制运行所有 转换，请启用此选项，如果输出将通过UglifyJS或仅支持ES5的环境运行，则此选项很有用。

configPath： string，默认为 process.cwd()

配置搜索browserslist的起点将开始，然后上升到系统根目录，直到找到。

ignoreBrowserslistConfig boolean，默认为 false

切换是否使用browserslist配置源，包括搜索任何browserslist文件或引用package.json中的browserslist键。这对于使用browserslist配置的项目非常有用，这些项目不会使用Babel编译。

shippedProposals

切换启用对浏览器中提供的内置/功能提议的支持。如果目标环境对功能提议具有本机支持，则会启用其匹配的解析器语法插件，而不是执行任何转换。请注意，这不会启用相同的转换@babel/preset-stage-3，因为提案可以在登陆浏览器之前继续更改。

二 决一死战的 babel

const babel = require("@babel/core");
babel.transform("code", optionsObject);

generator插件使用

npm install --save-dev @babel/generator

此插件是处理jsx的
npm install --save-dev @babel/preset-react
此插件是处理typescript的
npm install --save-dev @babel/preset-flow
// @flow
function square(n: number): number {
  return n * n;
}
此插件也是处理typescript的
npm install --save-dev @babel/preset-typescript