Grunt Babel每文件耗时6秒

Grunt Babel Taking 6 Seconds Per File

本文关键字：6秒 文件 Babel Grunt      更新时间：2023-09-26

我正试图在我的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并更改文件时，它会记录执行时间：

运行"babel:dist"（babel）任务

完成，没有错误。

执行时间（2015-12-01 11:57:54 UTC）巴贝尔：dist 6.7s▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇100%总计6.7s

但当我在终端中使用babel-cli时，它会在几毫秒内传输，甚至几乎是瞬间：

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

这肯定太长了。我在这里做错什么了吗。

感谢您的帮助。提前感谢！

在开发过程中，您可以决定直接在浏览器中运行JS版本的Babel核心，它运行得很快。

然后，为了进行部署，你可以制作一个特定的Grunt构建任务，从HTML中删除Babel Core，并使用Grunt Babel插件转换文件。

你的Gruntfile会有这样的东西：

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

为了删除Babel核心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核心可以在这里找到：http://cdnjs.com/libraries/babel-core。您可以下载它并将其添加到您的项目中，也可以直接从CDN运行它。

相关文章：