javascript - 无法让我的 JavaScript babel 工作

Question

我对 ES6/grunt/browserify 比较陌生，并尝试使用构建任务和文件观察器设置一个简单的项目。我尝试了几种选择，但总是遇到不同的错误。

选项 1:

包.json

{
  "name": "browserify-babel-demo",
  "version": "1.0.0",
  "main": "dist/module.js",
  "dependencies": {},
  "devDependencies": {
    "babelify": "^7.2.0",
    "grunt": "^0.4.5",
    "grunt-browserify": "^4.0.1",
    "grunt-contrib-clean": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        browserify: {
            dist: {
                options: {
                    transform: ["babelify"]
                },
                files: {
                    "./dist/module.js": ["./modules/index.js"]
                }
            }
        },
        watch: {
            scripts: {
                files: ["./modules/*.js"],
                tasks: ["browserify"]
            }
        }
    });

    grunt.loadNpmTasks("grunt-browserify");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.registerTask("default", ["watch"]);
    grunt.registerTask("build", ["browserify"]);
};

导入.js

var sum = (a, b = 6) => (a + b);

var square = (b) => {
    return b * b;
};

var variable = 8;

class MyClass {
    constructor(credentials) {
        this.name = credentials.name;
        this.enrollmentNo = credentials.enrollmentNo
    }
    getName() {
        return this.name;
    }
}

export { sum, square, variable, MyClass };

index.js

import {sum, square, variable, MyClass} from './import.js';

console.log(square(5));

var cred = {
    name: 'ABCD',
    enrollmentNo: 11115078
}

var x = new MyClass(cred);

console.log(x.getName());

错误:

于 2015 年 12 月 30 日星期三 09:33:15 GMT+1100(澳大利亚东部夏令时间)在 3.552 秒内完成 - 正在等待... 文件“modules\index.js”已更改。 运行“browserify:dist”(browserify)任务 C:\Users\pavan.kumar\WebstormProjects\BaseModuleSetup\modules\index.js:1 从'./import.js'导入{sum，square，variable，MyClass}； ^ ParseError:“导入”和“导出”可能仅与“sourceType:模块”一起出现 警告:运行 grunt-browserify 时出错。使用 --force 继续。

因警告而中止。 于 2015 年 12 月 30 日星期三 09:34:12 GMT+1100(澳大利亚东部夏令时间)在 3.732 秒内完成 - 正在等待...

选项 2:

包.json

{
  "name": "browserify-babel-demo",
  "version": "1.0.0",
  "main": "dist/module.js",
  "dependencies": {},
  "devDependencies": {
    "babelify": "^7.2.0",
    "grunt": "^0.4.5",
    "grunt-browserify": "^4.0.1",
    "grunt-contrib-clean": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        browserify: {
            dist: {
                options: {
                    transform: [
                        ["babelify", {
                            loose: "all"
                        }]
                    ]
                },
                files: {
                    // if the source file has an extension of es6 then
                    // we change the name of the source file accordingly.
                    // The result file's extension is always .js
                    "./dist/module.js": ["./modules/index.js"]
                }
            }
        },
        watch: {
            scripts: {
                files: ["./modules/*.js"],
                tasks: ["browserify"]
            }
        }
    });

    grunt.loadNpmTasks("grunt-browserify");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.registerTask("default", ["watch"]);
    grunt.registerTask("build", ["browserify"]);
};

import.js 和index.js 与上面相同!

错误:

运行“监视”任务 等待... 文件“modules\index.js”已更改。 运行“browserify:dist”(browserify)任务 ReferenceError: [BABEL] C:\Users\pavan.kumar\WebstormProjects\BaseModuleSetup\modules\index.js:未知选项:base.loose 解析文件时:C:\Users\pavan.kumar\WebstormProjects\BaseModuleSetup\modules\index.js 警告:运行 grunt-browserify 时出错。使用 --force 继续。

因警告而中止。 于 2015 年 12 月 30 日星期三 09:58:14 GMT+1100(澳大利亚东部夏令时间)在 3.365 秒内完成 - 正在等待...

不知道为什么它不起作用!

感谢您的帮助!

更新1:

根据其中一位评论者的反馈添加了名为 .babelrc 的新文件。点击此链接 Babel file is copied without being transformed

.babelrc

{
    "presets": [
        "es2015"
    ]
}

package.json

{
  "name": "browserify-babel-demo",
  "version": "1.0.0",
  "main": "dist/module.js",
  "dependencies": {
    "babel-preset-es2015": "^6.3.13"
  },
  "devDependencies": {
    "babelify": "^7.2.0",
    "grunt": "^0.4.5",
    "grunt-browserify": "^4.0.1",
    "grunt-contrib-clean": "^0.7.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

错误:两个选项都与上面相同!需要一些指导，请

Answer 1

经过痛苦的重试并根据链接https://github.com/babel/babelify/issues/129中给出的建议我只需稍加修改就可以让它工作。我写这个回复是为了方便其他人将来解决问题!

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        "browserify": {
            dist: {
                options: {
                    transform: ["babelify"]
                },
                files: {
                    "./dist/module.js": ["./modules/index.js"]
                }
            }
        },
        "babel": {
            "presets": ["react"]
        },
        watch: {
            scripts: {
                files: ["./modules/*.js"],
                tasks: ["browserify"]
            }
        }
    });

    grunt.loadNpmTasks("grunt-browserify");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.registerTask("default", ["watch"]);
    grunt.registerTask("build", ["browserify"]);
};