如何判断 Babel 6 正在转译哪些文件？答案

【问题标题】：How to tell which files are being transpiled by Babel 6?如何判断 Babel 6 正在转译哪些文件？
【发布时间】：2016-10-01 17:21:17
【问题描述】：

我有一个项目正在使用 babel-register 在 Node 6.6 项目中需要该模块时将 ES6 源动态转换为 ES5。我已经阅读了 babel-register hooks into Node's require 函数，以便在您尝试加载文件时对其进行转译，但我并不总是清楚哪些文件会受到该更改的影响。

我在编写测试时经常会遇到这个问题：只是我的生产代码被转译，还是测试代码也被转译？这让我想到了一个更普遍的问题，这就是本文的主题帖子：

我如何知道 Babel 何时实际运行，以及哪些文件正在被转译？

示例代码

假设我有这样的生产类，它们是用 ES6 语法编写的

//src/greeter.js
export default class Greeter {
  sayHello() {
    return 'Hello World';
  }
}

并且 Babel 被配置为这样转换 (.babelrc)

{
  "presets": ["es2015"]
}

然后是一些测试代码

//features/step_definitions/greeter_steps.js
import Greeter from '../../src/greeter'; //Causes greeter.js to be transpiled
import expect from 'expect';

var stepWrapper = function() {
  //Does Babel try to transpile this code too?
  this.Given(/^a greeter$/, function() { 
    this.greeter = new Greeter();
  });

  this.When(/^I ask it for a general greeting$/, function() {
    this.greeting = this.greeter.sayHello();
  });

  this.Then(/^it should greet the entire world$/, function() {
    expect(this.greeting).toEqual('Hello World');
  });
};

module.exports = stepWrapper;

所有这些都像这样在 Node 上运行

cucumberjs --compiler js:babel-core/register

Example code is available here，如果有帮助的话。

【问题讨论】：

标签： javascript node.js babeljs cucumberjs babel-register

【解决方案1】：

我对@987654321@ 进行了破解，以便像这样进行一些日志记录

function compile(filename) {
  var result = void 0;

  var opts = new _babelCore.OptionManager().init((0, _extend2.default)({ sourceRoot: _path2.default.dirname(filename) }, (0, _cloneDeep2.default)(transformOpts), { filename: filename }));

  var cacheKey = (0, _stringify2.default)(opts) + ":" + babel.version;

  var env = process.env.BABEL_ENV || process.env.NODE_ENV;
  console.log('[babel-register::compile] filename=' + filename + '\n'); //Added logging here
  if (env) cacheKey += ":" + env;

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

然后报告测试和生产代码至少在某种程度上通过 Babel

$ npm t

> cucumber-js-babel@1.0.0 test /Users/krull/git/sandbox/node/cucumber-js-babel
> cucumberjs --compiler js:babel-core/register

[babel-register::compile] filename=.../node/cucumber-js-babel/features/step_definitions/greeter_steps.js

[babel-register::compile] filename=.../node/cucumber-js-babel/src/greeter.js
...test results...

但是，我希望有一个更好的解决方案

通过某些插件和/或配置方式工作，而不是猴子补丁
更好地区分哪些文件实际被转译，哪些文件未经修改就通过 Babel

【讨论】：

【解决方案2】：

因为这个：

cucumberjs --compiler js:babel-core/register

...babel 会为您的测试和常规源代码调用。请记住，在 node 中，导入 JS 的唯一方法是通过require，所以显然babel-register 将始终被调用。当然，babel 的作用取决于它的配置，但很可能你有一个简单的配置，require 所需的所有文件都将被转译，node_modules 下的文件除外。

【讨论】：