不能让我的JavaScripts宝贝工作

Question

我是相对较新的ES6/grunt/浏览，并试图建立一个简单的项目与构建任务和文件观察者。我已经尝试了两种选择，而且我总是会遇到不同的错误。

选项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“(browserify)任务C:\Users\pavan.kumar\WebstormProjects\BaseModuleSetup\modules\index.js:1 import { sum，square，variable，MyClass } from './import.js'；^ ParseError：‘导入’和‘导出’可能只出现在'sourceType:模块‘警告:运行咕噜-browserify错误。继续使用武力。

由于警告而中止。于2015年12月30日上午3.732s完成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和上面一样！

错误：

运行“监视”任务等待..。文件"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。继续使用武力。

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

不知道为什么不起作用！

谢谢你的帮忙!

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

​