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日星期三09:33:15 GMT + 1100（澳大利亚东部夏令时间）完成3.552秒 - 等待... 文件“modules \ index.js”已更改。运行“browserify：dist”（browserify）任务 C：\ Users \用户pavan.kumar \ WebstormProjects \ BaseModuleSetup \模块\ index.js：1 从'./import.js'导入{sum，square，variable，MyClass}; ^ ParseError：'import'和'export'可能只出现'sourceType：module' 警告：运行grunt-browserify时出错。使用--force继续。

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

选项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时出错。使用--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

＆＃13;

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

＆＃13;

无法使我的JavaScripts babel工作

1 个答案: