Babel

- const MyVisitor = {
-   Identifier() {
-     console.log("Called!");
-   }
- };
+ const MyVisitor = {
+   Identifier: {
+     enter(path) {
+       console.log("Entered!");
+     },
+     exit(path) {
+       console.log("Exited!");
+     }
+   }
+ };

/* ------ 节点 ------ */
{
  type: "FunctionDeclaration",
  id: {
    type: "Identifier",
    name: "square"
  },
  ...
}
/* ------ path ------ */
{
  "parent": {
    "type": "FunctionDeclaration",
    "id": {...},
    ...
  },
  "node": {
    "type": "Identifier",
    "name": "square"
  },
  "hub": {...},
  "contexts": [],
  "data": {},
  "shouldSkip": false,
  "shouldStop": false,
  "removed": false,
  "state": null,
  "opts": null,
  "skipKeys": null,
  "parentPath": null,
  "context": null,
  "container": null,
  "listKey": null,
  "inList": false,
  "parentKey": null,
  "key": null,
  "scope": null,
  "type": null,
  "typeAnnotation": null,
  // 添加,更新,移动和删除节点有关的其他方法
}

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    "transform-flow-strip-types"
  ]
}

/* ------- 1. npm init 创建package.json 把上方用到的preset和插件安装 ------- */
{
  "name": "babel-preset-my-awesome-preset",
  "version": "1.0.0",
  "author": "James Kyle <me@thejameskyle.com>",
  "dependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-plugin-transform-flow-strip-types": "^6.3.15"
  }
}
/* ------- 2. 创建 index.js ------- */
module.exports = function () {
  presets: [
    require("babel-preset-es2015"),
    require("babel-preset-react")
  ],
  plugins: [
    require("babel-plugin-transform-flow-strip-types")
  ]
};
// 与 webpack loader 一样，多个 preset 执行顺序也是从右到左，
// 而babel插件则是正序的且在preset前运行。

// 前置操作 npm init -y && npm i @babel/cli @babel/core @babel/preset-env -D
// test.js
const arrowFun = (word) => {
  const str = 'hello babel';
};
const p = new Promise()

// 配置 .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": false
      }
    ]
  ]
}

// cmd 中执行 babel test.js，会得到如下代码：
"use strict";

var arrowFun = function arrowFun(word) {
  var str = 'hello babel';
};
const p = new Promise()

npm i @babel/runtime -s # 注意这里是 生产依赖
npm i @babel/plugin-transform-runtime -D

// @babel/runtime 配置
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": false
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false, // false|2|3 是否对core-js进行polyfill，以及用哪个版本的core-js进行polyfill
        "helpers": true, // 是否对 helper 函数进行提取
        "regenerator": true, // 是否对regenerator-runtime进行polyfill
        "useESModules": false
      }
    ]
  ]
}

// 测试代码 test.js
class Demo {
  constructor() {
    this.word = 'hello babel';
  }
  say() {
    console.log(this.word);
  }
}

// 转译后
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var Demo = /*#__PURE__*/function () {
  function Demo() {
    (0, _classCallCheck2["default"])(this, Demo);
    this.word = 'hello babel';
  }
  (0, _createClass2["default"])(Demo, [{
    key: "say",
    value: function say() {
      console.log(this.word);
    }
  }]);
  return Demo;
}();
/* ---- 对比没有配置 @babel/plugin-transform-runtime ---- */
'use strict';

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError('Cannot call a class as a function');
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ('value' in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

var Foo =
  /*#__PURE__*/
  (function () {
    function Foo() {
      _classCallCheck(this, Foo);
    }
    _createClass(Foo, [
      {
        key: 'saySth',
        value: function saySth() {}
      }
    ]);
    return Foo;
  })();

npm i @babel/parser -s

/* ------- test.js -------*/
import * as babelParser from '@babel/parser';

const code = `function sum(a, b){
  return a + b
}`;

const AST = babelParser.parse(code);
console.log(AST);
/* ------- 执行 -------*/
// 小tip，执行js脚本此类错误 SyntaxError: Cannot use import statement outside a module
// 需要去 package.json 中添加 "type": "module" (ESM) 或者改用 require().default 引入
node test.js
/* ------- babylon 转换后的结果 -------*/
Node {
  type: 'File',
  start: 0,
  end: 36,
  loc: SourceLocation {
    start: Position { line: 1, column: 0, index: 0 },
    end: Position { line: 3, column: 1, index: 36 },
    filename: undefined,
    identifierName: undefined
  },
  errors: [],
  program: Node {
    type: 'Program',
    start: 0,
    end: 36,
    loc: SourceLocation {
      start: [Position],
      end: [Position],
      filename: undefined,
      identifierName: undefined
    },
    sourceType: 'script',
    interpreter: null,
    body: [ [Node] ],
    directives: []
  },
  comments: []
  /*  tokens 是babylon解析后的产物，放这里是为了做个对比，why？ */
  // tokens: [
  //   Token {
  //     type: [KeywordTokenType],
  //     value: 'function',
  //     start: 0,
  //     end: 8,
  //     loc: [SourceLocation]
  //   },
  //   // ... other tokens
  // ]
}

npm i @babel/traverse -D

import * as babelParser from '@babel/parser';
import _traverse from '@babel/traverse';
const traverse = _traverse.default;

const code = `function sum(a, b){
  return a + b
}`;

const AST = babelParser.parse(code);

traverse(AST, {
  enter(path) {
    if (path.isIdentifier({ name: 'a' })) {
      path.node.name = 'c';
    }
  }
});

npm i @babel/types -s

// ...
import * as t from "babel-types";

// ...
traverse(AST, {
  enter(path) {
    if (t.isIdentifier(path.node, { name: 'a' })) {
      path.node.name = 'c';
    }
  }
});

npm install @babel/generator -D

import generate from "@babel/generator";
import * as babelParser from '@babel/parser';
import _traverse from '@babel/traverse';
import _generate from '@babel/generator';

const traverse = _traverse.default;
const generate = _generate.default;

const code = `function sum(a, b){
  return a + b
}`;

const AST = babelParser.parse(code);

traverse(AST, {
  enter(path) {
    if (path.isIdentifier({ name: 'a' })) {
      path.node.name = 'c';
    }
  }
});

const output = generate(
  AST,
  {
    /*options*/
  },
  code
);
console.log('📌📌📌 ~ output', output);
/* ----------- output ---------- */
📌📌📌 ~ output {
  code: 'function sum(c, b) {\n  return c + b;\n}',
  decodedMap: undefined,
  map: [Getter/Setter],
  rawMappings: [Getter/Setter]
}

const hello = () => {}

/**
 * 从上方的网站找到了 hello 的节点位置：
 * "id": {
 *  "type": "Identifier",
 *  "start": 6,
 *  "end": 11,
 *  "name": "hello"
 * },
 */
// plugin-hello.js，在本地这么写是ok的
// 但是想要发布为一个包并应用配置则得按照官方插件的样式去写
export default function ({ types: t }) {
  return {
    visitor: {
      Identifier(path, state) {
        if (path.node.name === 'hello') {
          path.replaceWith(t.Identifier('world'));
        }
      }
    }
  };
}

// 在插件中配置 "plugins": [["./plugin-hello.js"]]，编译后结果:
/**
 * "use strict";
 *
 *  var world = function world() {};
 */

npm i babel-plugin-log-shiny -D

{
  "plugins": [
    [
      "log-shiny",
      {
        "prefix": "whatever you want~ like 🔥"
      }
    ]
  ]
}