咕噜巴贝尔每档6秒 [英] Grunt Babel Taking 6 Seconds Per File

问题描述

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

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

  grunt.initConfig（{ 
 watch：{
 babel：{
 files：[<％= yeoman.app％> / scripts / ** / *。js]，
任务： [babel] 
}，
 livereload：{
选项：{
 livereload：LIVERELOAD_PORT 
}，
文件：[
 {.tmp，<％= yeoman.app％>} / scripts / ** / *。js，
] 
} 
}，
 babel：{
选项：{
 sourceMap：true，
预设：['es2015'] 
}，
 dist：{
 files：[
 { 
展开：true，
 cwd：'<％= yeoman.app％> / scripts /'，
 src：['** / *。js']，
 dest：'.tmp / scripts /'
} 
] 
} 
} 
}）; 
 grunt.registerTask（serve，function（target）{
 return grunt.task.run（[watch]）; 
}）; 
  

当我运行 grunt serve 并更改a它会记录执行时间：

lockquote

运行babel：dist（babel）任务
$ b $ 完成，没有错误。

执行时间（2015-12-01 11:57:54 UTC）
babel：dist 6.7s▇▇ ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇100％
共计6.7s

但是，当我在终端中使用 babel-cli 时，它会以毫秒为单位进行转换，几乎可以瞬间转换为：

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

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

任何帮助表示赞赏。在开发过程中，您可以决定直接在浏览器中运行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 / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js>< /脚本> 
<！ -  / build  - > 
  

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

I'm trying to use Babel in my grunt build process to transpile my .js project files from ES6 to ES5. I have a watch task watching my .js directory for changes and when changes are detected, I run the babel task.

For some reason though, changing just one .js file takes anywhere between 6-10 seconds to complete. I have a feeling it's transpiling the entire project, but I'm not sure. My Gruntfile.js looks like this:

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"]);
});

When I run grunt serve and change a file it logs the execution time:

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

But when I use babel-cli in my terminal, it transpiles in milliseconds, almost instantaneously even:

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

Surely this is way too long. Am I doing something wrong here.

Any help is appreciated. Thanks in advance!

解决方案

During development you can decide to run the JS version of the Babel-core directly in the browser, which runs quite fast.

Then for deployment you can make a specific Grunt build task that removes the Babel-Core from the HTML and instead transpiles the files with the Grunt Babel plugin.

Your Gruntfile will have something like this:

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

For the removal of the Babel-core JS you can use plugins like like grunt-processhtml: http://www.npmjs.com/package/grunt-processhtml . The HTML will look like this:

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

The JS Babel-core can found here: http://cdnjs.com/libraries/babel-core . You can download it and add it to your project or just run it from the CDN directly.

这篇关于咕噜巴贝尔每档6秒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！