babel源码解析一

我们直接创建一个工程，然后执行:

npm install -D @babel/cli

我们用的是最新版本7.8.0

创建一个test1.js测试：

/* test.js */
const fn = () => {}
new Promise(() => {})
class Test {}
const c = [1, 2, 3].includes(1)
//测试插件1
var a=10;

创建一个babel配置文件.babelrc（先不写任何配置）：

/* .babelrc */
{
 
}

然后我们执行：

npx babel test1.js -o test1.babel.js --config-file .babelrc

最后看一下结果test1.babel.js：

/* test.js */
const fn = () => {};

new Promise(() => {});

class Test {}

const c = [1, 2, 3].includes(1); //测试插件1

var a = 10;

哦？为啥一点变化都没有呢？ 我们带着疑问研究一下源码～

为了更好的研究babel的源码，我们直接去github clone一份：

git clone https://github.com/babel/babel.git

然后当我们执行：

npx babel test1.js -o test1.babel.js --config-file 

的时候，我们直接打开packages/babel-cli/bin/babel.js：

#!/usr/bin/env node

require("../lib/babel");

packages/babel-cli/src/babel/index.js：

#!/usr/bin/env node

import parseArgv from "./options";
import dirCommand from "./dir";
import fileCommand from "./file";

const opts = parseArgv(process.argv);

if (opts) {
  const fn = opts.cliOptions.outDir ? dirCommand : fileCommand;
  fn(opts).catch(err => {
    console.error(err);
    process.exitCode = 1;
  });
} else {
  process.exitCode = 2;
}

packages/babel-cli/src/babel/file.js：

export default async function({
  cliOptions,
  babelOptions,
}: CmdOptions): Promise {
     if (cliOptions.filenames.length) {
    await files(cliOptions.filenames);
  } else {
    await stdin();
  }
}

然后执行files方法：

 async function files(filenames: Array): Promise {
    if (!cliOptions.skipInitialBuild) {
      await walk(filenames);
    }

然后执行walk方法：

async function walk(filenames: Array): Promise {
    
        try {
          return await util.compile(
          );
        } catch (err) {
       
    );
  }

可以看到最后执行了util的compile方法（packages/babel-cli/src/babel/util.js）：

export function compile(
  filename: string,
  opts: Object | Function,
): Promise