无法使我的 JavaScripts babel 工作

Question

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

选项 1：

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

imports.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 日星期三在 3.552 秒内完成 09:33:15 GMT+1100（澳大利亚东部夏令时间）- 正在等待... 文件 "modules\index.js" 已更改。运行 "browserify:dist"（浏览器化）任务 C:\Users\pavan.kumar\WebstormProjects\BaseModuleSetup\modules\index.js:1 import { sum, square, variable, MyClass } from './import.js'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module' 警告：错误运行 grunt-browserify。使用 --force 继续。

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

选项 2：

Package.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同上！

错误：

运行"watch"任务等待... 文件 "modules\index.js" 已更改。运行 "browserify:dist"（浏览器化）任务 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 日星期三在 3.365 秒内完成 09:58:14 GMT+1100（澳大利亚东部夏令时）- 等待...

不确定为什么它不起作用！

感谢您的帮助！

更新 1：

根据其中一位评论者的反馈添加了名为 .babelrc 的新文件。按照这个link

.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

经过痛苦的重试并根据 link 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"]);
};

无法使我的 JavaScripts babel 工作

Cannot make my JavaScripts babel working

javascript

node.js

gruntjs