静态关键字在grunt-babel中抛出错误 [英] static keyword throwing error in grunt-babel

问题描述

我试图在尝试出来 babeljs的标签 -

  class aboutController {
 constructor（ajaxService）{
 this.ajaxService = ajaxService; 
 this.printLog（）; 
} 
 
 printLog（）{
 this.ajaxService.log（）; 
} 
 
 static $ inject = [ajaxService]; 
} 
  

静态关键字被转载到

  {
 key：$ inject，
 value：[ajaxService]，
 enumerable：true 
} 
  

然后我尝试了grunt-babel任务来自动化构建。我的gruntfile.js看起来像这样 -

  module.exports = function（grunt）{
 grunt.initConfig 
 pkg：grunt.file.readJSON（'package.json'），
 babel：{
 options：{
 sourceMap：true，
 highlightCode：true 
 $，
 es6：{
 files：[
 {
 expand：true，
 src：['components / ** / *。es6']， 
 ext：'.js'
} 
] 
} 
}，
手表：{
脚本：{
文件：['components / ** / *。es6']，
 tasks：['babel'] 
} 
} 
}）; 
 
 require（load-grunt-tasks）（grunt）; 
 grunt.registerTask（default，[babel，watch]）; 
} 
  

但是现在static关键字给出错误，当我删除static关键字时，建造过去了。任何想法如何解决这个问题。咕咕咕噜咕噜咕噜咕咕咕咕？？？？？？？？？？？？>>>>>>>>>>> - - - - - - - - - - - - - - - - - <>> <
name：babeles6，
version：1.0.0，
description：，
main ：index.js，
scripts：{
test：echo \错误：no test specified\&& exit 1
}
author：，
license：ISC，
devDependencies：{
grunt：〜0.4.2，
grunt-babel：^ 5.0.1，
grunt-contrib-watch：^ 0.6.1，
load-grunt-tasks：^ 3.2.0
}
}

解决方案

ES6类语法仅支持方法。您的示例使用ES7提出的类属性。如果您有实验选项，则在Babel中启用尝试。

  static $ inject = [ajaxService ]; 
  

只有在您特别启用 es7.classProperties 或广泛启用所有阶段0转换。

与ES6兼容的方法将是

  static get $ inject（）{
 return [ajaxService]; 
} 
  

I tried to trans-pile below code in try it out tab of babeljs -

    class aboutController{
      constructor(ajaxService){
        this.ajaxService = ajaxService;
        this.printLog();
      }

      printLog(){
        this.ajaxService.log();
      }

      static $inject = ["ajaxService"];
    }

The static keyword got trans-piled to

{
  key: "$inject",
  value: ["ajaxService"],
  enumerable: true
}

I then tried out grunt-babel task to automate the build. My gruntfile.js looks like this -

module.exports = function(grunt){
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    babel: {
        options: {
            sourceMap: true,
            highlightCode: true
        },
        es6: {
            files: [
                {
                    expand: true,
                    src: ['components/**/*.es6'],
                    ext: '.js'
                }
            ]
        }
    },
    watch: {
        scripts: {
            files: ['components/**/*.es6'],
            tasks:['babel']
        }
    }
});

require("load-grunt-tasks")(grunt);
grunt.registerTask("default", ["babel", "watch"]);
}

But now the static keyword is giving error, when I remove the static keyword, the build is passing. Any idea how to fix this. Is grunt-babel outdated?

Here is how my packahe.json looks like -

{
"name": "babeles6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
    "grunt": "~0.4.2",
    "grunt-babel": "^5.0.1",
    "grunt-contrib-watch": "^0.6.1",
    "load-grunt-tasks": "^3.2.0"
}
}

解决方案

ES6 class syntax only supports methods. Your example uses ES7-proposed class properties. They are enabled in Babel on "Try it out" if you have "Experimental" checked.

 static $inject = ["ajaxService"];

will only work if you specifically enable es7.classProperties or broadly enabled all stage 0 transforms.

The ES6-compatible approach would be

static get $inject(){
    return ["ajaxService"];
}

这篇关于静态关键字在grunt-babel中抛出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！