转译器（如 babel）何时将 ecmascript6 代码更改为 ecmascript5 代码？答案

【问题标题】：When does a transpiler (like babel) changes ecmascript6 code into ecmascript5 code?转译器（如 babel）何时将 ecmascript6 代码更改为 ecmascript5 代码？
【发布时间】：2017-06-02 14:32:07
【问题描述】：

我正在使用 babel、maven、angular 1.5 和 es6。遇到了转译器的概念，将内部用es6 编写的代码转换为es5 代码以实现浏览器的向后兼容性。想知道转译器（如babel）何时将ecmascript6 代码更改为ecmascript5 代码？

【问题讨论】：

“何时”是什么意思？当你告诉它这样做时，它会编译你的代码。
我现在得到了答案。
仅供参考：一般来说，应该在发送任何请求之前转译您的 javascript 文件。当然可以在每个 http 请求上转换代码，但这将是非常低效的。但我绝对建议只转译一次并保存转译后的文件，以便所有客户端都可以使用它们。 – 福里温

标签： ecmascript-6 babeljs ecmascript-5 transpiler

【解决方案1】：

我不确定我是否理解你的问题。如果你像这样安装 babel：

npm install -g babel-cli

你可以通过运行来编译你的代码：

babel script.js --out-file script-compiled.js

如果你像这样使用 gulp：

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
    return gulp.src("src/js/*.js")
        .pipe(babel())
        .pipe(gulp.dest("dist/js"));
});

它会转译您的代码并将其保存到dist/js。

如果您愿意，您还可以定义一个 gulp watch，以便您的代码在保存后立即被转译：

var paths = {
  babel: './somedir'
}
gulp.task('babel', function() {
  return gulp.src(paths.babel)
  .pipe(babel())
  .pipe(gulp.dest('./'))
})
gulp.task('watch', function() {
  gulp.watch(paths.babel, ['babel'])
})

如果您运行 gulp watch 任务，它会自动等待文件更改，然后立即转译它们。

编辑（澄清问题后）：

一般来说，您应该在发送任何请求之前转译您的 javascript 文件。当然可以在每个 http 请求上转换代码，但这将是非常低效的。所以我肯定会建议只转译一次并保存转译后的文件，以便所有客户端都可以使用它们。

【讨论】：

是的，我明白你的意思了。我问的是它什么时候真正被转译。代码是通过 babel 转译然后放到服务器上还是每次客户端的请求到达服务器时，代码被转译并返回响应？
一般来说应该在发送任何请求之前编译你的javascript文件。当然可以在每个 http 请求上转换代码，但这将是非常低效的。但我绝对建议只转译一次并保存转译后的文件，以便所有客户端都可以使用它们。
您可以点击答案旁边的复选标记。

【解决方案2】：

当您在服务器上编译代码时。它从 es6 转换为 es5。

【讨论】：

能否请您告诉我您使用的是哪个版本的 babel？
6.4.2是版本。
和角度 1.5 ?