使用 babel 和 browserify 进行 Grunt
Grunt with babel and browserify
我有一个简单的 JavaScript 项目,它使用 Babel 将 ECMAScript 6 转换为 ES5,然后需要 Browserify 来利用 ES6 的模块。
因此,我想出了这个 Gruntfile.js
来编译它:
module.exports = function(grunt) {
"use strict";
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-browserify');
grunt.initConfig({
"babel": {
options: {
sourceMap: true
},
dist: {
files: {
"lib/pentagine.js": "lib/pentagine_babel.js",
"demos/helicopter_game/PlayState.js": "demos/helicopter_game/PlayState_babel.js"
}
}
},
"browserify": {
dist: {
files: {
"lib/pentagine.js": "lib/pentagine_babel.js",
"demos/helicopter_game/PlayState.js": "demos/helicopter_game/PlayState_babel.js"
}
}
}
});
grunt.registerTask("default", ["babel", "browserify"]);
};
grunt
运行正常,没有任何错误。但是,我收到以下错误:
Uncaught SyntaxError: Unexpected reserved word
在 export
Uncaught SyntaxError: Unexpected reserved word
在 import
基本上我在主文件中所做的如下:
export class Game {
...
}
然后像这样导入:
import {Sprite, Game} from "lib/pentagine";
我正在根据 ECMAScript 6 编写所有代码。但是,export/import 似乎不起作用,而是与 JavaScript 保留字冲突(尽管我有 browserify.js
工作)。
您不应该 browserify
在 babel
任务之后创建的文件吗?请注意,属性 名称是目标文件,:
之后的值是源文件。 (我假设你的 ES6 文件被称为 filename.js
而不是 filename_babel.js
)
files: {
"destination_file": "src_file"
}
这导致:
grunt.initConfig({
"babel": {
options: {
sourceMap: true
},
dist: {
files: {
"lib/pentagine_babel.js": "lib/pentagine.js",
"demos/helicopter_game/PlayState_babel.js": "demos/helicopter_game/PlayState.js"
}
}
},
"browserify": {
dist: {
files: {
"lib/pentagine_browserified.js": "lib/pentagine_babel.js",
"demos/helicopter_game/PlayState_browserified.js": "demos/helicopter_game/PlayState_babel.js"
}
}
}
});
或只是 lib/pentagine_babel.js": "lib/pentagine_babel.js"
到 browserify
同一个文件。
我有一个简单的 JavaScript 项目,它使用 Babel 将 ECMAScript 6 转换为 ES5,然后需要 Browserify 来利用 ES6 的模块。
因此,我想出了这个 Gruntfile.js
来编译它:
module.exports = function(grunt) {
"use strict";
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-browserify');
grunt.initConfig({
"babel": {
options: {
sourceMap: true
},
dist: {
files: {
"lib/pentagine.js": "lib/pentagine_babel.js",
"demos/helicopter_game/PlayState.js": "demos/helicopter_game/PlayState_babel.js"
}
}
},
"browserify": {
dist: {
files: {
"lib/pentagine.js": "lib/pentagine_babel.js",
"demos/helicopter_game/PlayState.js": "demos/helicopter_game/PlayState_babel.js"
}
}
}
});
grunt.registerTask("default", ["babel", "browserify"]);
};
grunt
运行正常,没有任何错误。但是,我收到以下错误:
Uncaught SyntaxError: Unexpected reserved word
在 export
Uncaught SyntaxError: Unexpected reserved word
在 import
基本上我在主文件中所做的如下:
export class Game {
...
}
然后像这样导入:
import {Sprite, Game} from "lib/pentagine";
我正在根据 ECMAScript 6 编写所有代码。但是,export/import 似乎不起作用,而是与 JavaScript 保留字冲突(尽管我有 browserify.js
工作)。
您不应该 browserify
在 babel
任务之后创建的文件吗?请注意,属性 名称是目标文件,:
之后的值是源文件。 (我假设你的 ES6 文件被称为 filename.js
而不是 filename_babel.js
)
files: {
"destination_file": "src_file"
}
这导致:
grunt.initConfig({
"babel": {
options: {
sourceMap: true
},
dist: {
files: {
"lib/pentagine_babel.js": "lib/pentagine.js",
"demos/helicopter_game/PlayState_babel.js": "demos/helicopter_game/PlayState.js"
}
}
},
"browserify": {
dist: {
files: {
"lib/pentagine_browserified.js": "lib/pentagine_babel.js",
"demos/helicopter_game/PlayState_browserified.js": "demos/helicopter_game/PlayState_babel.js"
}
}
}
});
或只是 lib/pentagine_babel.js": "lib/pentagine_babel.js"
到 browserify
同一个文件。