babel各單元簡(jiǎn)介&如何寫一個(gè)babel插件

peixn 發(fā)布于2019-08-22 15:38 / 2515人閱讀

摘要：是怎么工作的如何編譯應(yīng)用場(chǎng)景語(yǔ)法糖的代碼統(tǒng)一相關(guān)概念介紹依賴，提供的方法，只轉(zhuǎn)化語(yǔ)法，不轉(zhuǎn)換類，的基礎(chǔ)配置利用對(duì)進(jìn)行劫持，在中進(jìn)行原理見(jiàn)同時(shí)對(duì)后的進(jìn)行緩存，提高下次效率讀取緩存根據(jù)判斷是否需要重新中傳入配置入口函數(shù)提供

Babel babel是怎么工作的?

parse->AST->transform->gengerate

如何編譯js->AST

babel應(yīng)用場(chǎng)景

語(yǔ)法糖的polyfill

代碼統(tǒng)一hack

相關(guān)概念介紹 babel-polyfill

依賴core-js，提供es*->es3的方法，只轉(zhuǎn)化語(yǔ)法，不轉(zhuǎn)換API（類Promise，WeakMap）

babel-helper babel-register(0.7.0-beta)

babel的基礎(chǔ)配置init

利用pirate對(duì)require進(jìn)行劫持，在hook中進(jìn)行babel 原理見(jiàn)

同時(shí)對(duì)babel后的code進(jìn)行緩存，提高下次babel效率

function compile(code, filename) {
    ...

  let cacheKey = `${JSON.stringify(opts)}:${babel.version}`;

  const env = babel.getEnv(false);

  if (env) cacheKey += `:${env}`;

    //讀取緩存 根據(jù)mtime判斷是否需要重新babel
  if (cache) {
    const cached = cache[cacheKey];
    if (cached && cached.mtime === mtime(filename)) {
      return cached.code;
    }
  }

  const result = babel.transform(code, {
    ...opts,
    sourceMaps: opts.sourceMaps === undefined ? "both" : opts.sourceMaps,
    ast: false,
  });

  if (cache) {
    cache[cacheKey] = result;
    result.mtime = mtime(filename);
  }

  if (result.map) {
    if (Object.keys(maps).length === 0) {
      installSourceMapSupport();
    }
    maps[filename] = result.map;
  }

  return result.code;
}

//hook中傳入ext配置
function hookExtensions(exts) {
  if (piratesRevert) piratesRevert();
  piratesRevert = addHook(compile, { exts, ignoreNodeModules: false });
}

//入口函數(shù)
export default function register(opts?: Object = {}) {
  // Clone to avoid mutating the arguments object with the "delete"s below.
  opts = Object.assign({}, opts);
  if (opts.extensions) hookExtensions(opts.extensions);

  if (opts.cache === false && cache) {
    registerCache.clear();
    cache = null;
  } else if (opts.cache !== false && !cache) {
    registerCache.load();
    cache = registerCache.get();
  }
  
  ...
}

babel-core

提供基礎(chǔ)的transform方法

如何寫一個(gè)babel插件

babel-plugin其實(shí)是對(duì)code轉(zhuǎn)出的ast進(jìn)行操作，

準(zhǔn)備工具

ast轉(zhuǎn)換工具

ast轉(zhuǎn)換可視化工具

ast的解構(gòu)可以類比成一個(gè)樹狀或者json嵌套結(jié)構(gòu)，他的每一層結(jié)構(gòu)都可以叫做一個(gè)節(jié)點(diǎn)，如下圖

babel提供一個(gè)visitor的方法，允許我們?cè)诶锩嬷付ㄎ覀兿胍L問(wèn)的節(jié)點(diǎn)，并且可以在命中該節(jié)點(diǎn)時(shí)做出自定義的的操作

實(shí)例分析

現(xiàn)在我們有一個(gè)需要移除整個(gè)業(yè)務(wù)bundle包里所有console.log的需求

1.那我們首先要知道console.log實(shí)際在ast是怎樣的一個(gè)節(jié)點(diǎn)結(jié)構(gòu)

形如

console.log("a")

實(shí)際ast的展現(xiàn)如下

對(duì)于各個(gè)節(jié)點(diǎn)具體含義，這里不做細(xì)講，可以參考文末的babel手冊(cè)

2.這里直接貼上代碼講吧

module.exports = function (babel) {

    const { types: t, template } = babel;

    const visitor = {
            //需要訪問(wèn)的節(jié)點(diǎn)名
            //訪問(wèn)器默認(rèn)會(huì)被注入兩個(gè)參數(shù) path（類比成dom），state
        ExpressionStatement(path, state) {
            const node = path.node;
            //延當(dāng)前節(jié)點(diǎn)向內(nèi)部訪問(wèn)，判斷是否符合console解析出的ast的特征
            const expressionNode = keyPathVisitor(node, ["expression"]);
            const isCallExpression = expressionNode.type === "CallExpression";
            if (isCallExpression) {
                const objectName = keyPathVisitor(expressionNode, ["callee", "object", "name"]);
                const prototypeName = keyPathVisitor(expressionNode, ["callee", "property", "name"]);
                if (objectName === "console" && prototypeName === "log" && !MAC) {
                        //如果符合上述條件，直接移除該節(jié)點(diǎn)
                    path.remove();
                }
            }
        }
    };

    return {
        visitor
    };
};

3.進(jìn)階版：如果我們想在babel-plugin中新增代碼呢

差不多有三種方法

A:手動(dòng)添加節(jié)點(diǎn)（很惡心~相信你不會(huì)想去了解）
B:先生成ast，直接path.insertBefore
C:使用babel-template
例子：移除autobind裝飾器，并在constructor中自動(dòng)bind this

注意點(diǎn)

1.因?yàn)閎abel判斷是否babel是根據(jù)modify time，所以babel插件寫完想實(shí)時(shí)生效，需要給當(dāng)前的env加上 BABEL_DISABLE_CACHE

//babel-register/cache.js

function load() {
  if (process.env.BABEL_DISABLE_CACHE) return;
    
  process.on("exit", save);
  process.nextTick(save);
    
  if (!_fs2.default.existsSync(FILENAME)) return;
    
  try {
    data = JSON.parse(_fs2.default.readFileSync(FILENAME));
  } catch (err) {
    return;
  }
}

2.babel插件寫完后發(fā)布npm時(shí)，記得一定要加上babel-plugin-前綴，因?yàn)榕渲迷赽abelrc中的插件名都會(huì)被babel在加載時(shí)統(tǒng)一加上babel-plugin前綴，然后在模塊系統(tǒng)中去查找

題外話 如何實(shí)現(xiàn)給require加上hook

傳送門

參考文獻(xiàn)

Babel插件手冊(cè)