javascript - Grunt Babel 每个文件耗时 6 秒

Question

我正在尝试在我的 grunt 构建过程中使用 Babel 将我的 .js 项目文件从 ES6 转换为 ES5。我有一个 watch 任务监视我的 .js 目录的变化，当检测到变化时，我运行 babel 任务。

但出于某种原因，仅更改一个 .js 文件需要 6-10 秒才能完成。我有一种感觉，它正在转换整个项目，但我不确定。我的 Gruntfile.js 看起来像这样:

grunt.initConfig({
  watch: {
    babel: {
      files: ["<%= yeoman.app %>/scripts/**/*.js"],
      tasks: ["babel"]
    },
    livereload: {
      options: {
        livereload: LIVERELOAD_PORT
      },
      files: [
        "{.tmp,<%= yeoman.app %>}/scripts/**/*.js",
      ]
    }
  },
  babel: {
    options: {
      sourceMap: true,
      presets: ['es2015']
    },
    dist: {
      files: [
        {
          expand: true,
          cwd: '<%= yeoman.app %>/scripts/',
          src: ['**/*.js'],
          dest: '.tmp/scripts/'
        }
      ]
    }
  }
});
grunt.registerTask("serve", function(target) {
  return grunt.task.run(["watch"]);
});

当我运行 grunt serve 并更改文件时，它会记录执行时间:

Running "babel:dist" (babel) task

Done, without errors.

Execution Time (2015-12-01 11:57:54 UTC) babel:dist 6.7s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100% Total 6.7s

但是当我在终端中使用 babel-cli 时，它会在几毫秒内完成转换，甚至几乎是瞬间:

babel --presets es2015 script.js --out-file transpiled.js

当然这太长了。我在这里做错了什么吗。

感谢任何帮助。提前致谢!

Answer 1

在开发过程中，您可以决定直接在浏览器中运行 JS 版本的 Babel-core，运行速度非常快。

然后为了部署，您可以创建一个特定的 Grunt 构建任务，从 HTML 中删除 Babel-Core，而是使用 Grunt Babel 插件转译文件。

您的 Gruntfile 将包含如下内容:

grunt.registerTask('build', ['processhtml', 'babel']);
grunt.registerTask('default', [''watch']);

要删除 Babel-core JS，您可以使用类似 grunt-processhtml 的插件:http://www.npmjs.com/package/grunt-processhtml . HTML 将如下所示:

<!-- build:remove -->   
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<!-- /build -->

JS Babel-core 可以在这里找到:http://cdnjs.com/libraries/babel-core .您可以下载它并将其添加到您的项目中，或者直接从 CDN 运行它。