使用 JS ES6 尝试 gulp 时出现意外标记 {
Unexpected token { when trying gulp with JS ES6
我是不是使用了错误版本的包,或者你可以 post 给我一个 link 详细的教程或 codepen,其中这个语法结构不会给我一个错误吗?
我收到这个错误:
$ gulp
D:\GIT\project02\gulpfile.js:20
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:413:25)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at execute (C:\Documents and Settings\Administrator\Application Data\npm\node_modules\gulp-cli\lib\versioned\^4.0.0-alpha.2\index.js:36:18)
at Liftoff.handleArguments (C:\Documents and Settings\Administrator\Application Data\npm\node_modules\gulp-cli\index.js:172:63)
at Liftoff.<anonymous> (C:\Documents and Settings\Administrator\Application Data\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:198:16)
我已经阅读了 ,但是 'use strict';
在我的 gulp 文件中,将 const 更改为 let 对我不起作用。
我全局安装的包:
$ npm -g ls --depth=0
C:\Documents and Settings\Administrator\Application Data\npm
├── babel-cli@6.14.0
├── babel-core@6.14.0
├── babel-preset-es2015@6.14.0
├── bower@1.7.9
├── gulp-babel@6.1.2
└── gulp-cli@1.2.2 (git://github.com/gulpjs/gulp-cli.git#9b053ed9b7a63a10777c33b86b04ed38d7f5b840)
我的节点是v4.0.0
和我在项目中使用的gulp:
$ gulp -v
[14:15:06] CLI version 1.2.2
[14:15:06] Local version 4.0.0-alpha.2
Destructing 是 ES6 特性,从 Node v6 开始正式支持。所以你应该替换:
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
与:
const config = loadConfig(),
COMPATIBILITY = config.COMPATIBILITY,
PORT = config.PORT,
UNCSS_OPTIONS = config.UNCSS_OPTIONS,
PATHS = config.PATHS
或者更新您的 Node 版本。
正如 Konstantin 所说,并非所有 ES6 功能都在您的 Gulpfile 中可用,因为节点必须处理这些文件。但是有一种简单的方法可以使用 babel-require
钩子来做到这一点。
像这样创建 Gulpfile:
'use strict';
// Compile task to ES5 on the fly!
require('babel-register');
// Require all tasks!
require('require-dir')('./tasks', { recurse: true });
并将您的任务放在 tasks
目录中。然后创建一个 .babelrc
文件来加载预设,例如
{
"presets": ["node5"]
}
当您使用节点 v5.x 时。现在你可以使用 ES6 特性了! :)
我是不是使用了错误版本的包,或者你可以 post 给我一个 link 详细的教程或 codepen,其中这个语法结构不会给我一个错误吗?
我收到这个错误:
$ gulp
D:\GIT\project02\gulpfile.js:20
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:413:25)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at execute (C:\Documents and Settings\Administrator\Application Data\npm\node_modules\gulp-cli\lib\versioned\^4.0.0-alpha.2\index.js:36:18)
at Liftoff.handleArguments (C:\Documents and Settings\Administrator\Application Data\npm\node_modules\gulp-cli\index.js:172:63)
at Liftoff.<anonymous> (C:\Documents and Settings\Administrator\Application Data\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:198:16)
我已经阅读了 'use strict';
在我的 gulp 文件中,将 const 更改为 let 对我不起作用。
我全局安装的包:
$ npm -g ls --depth=0
C:\Documents and Settings\Administrator\Application Data\npm
├── babel-cli@6.14.0
├── babel-core@6.14.0
├── babel-preset-es2015@6.14.0
├── bower@1.7.9
├── gulp-babel@6.1.2
└── gulp-cli@1.2.2 (git://github.com/gulpjs/gulp-cli.git#9b053ed9b7a63a10777c33b86b04ed38d7f5b840)
我的节点是v4.0.0
和我在项目中使用的gulp:
$ gulp -v
[14:15:06] CLI version 1.2.2
[14:15:06] Local version 4.0.0-alpha.2
Destructing 是 ES6 特性,从 Node v6 开始正式支持。所以你应该替换:
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
与:
const config = loadConfig(),
COMPATIBILITY = config.COMPATIBILITY,
PORT = config.PORT,
UNCSS_OPTIONS = config.UNCSS_OPTIONS,
PATHS = config.PATHS
或者更新您的 Node 版本。
正如 Konstantin 所说,并非所有 ES6 功能都在您的 Gulpfile 中可用,因为节点必须处理这些文件。但是有一种简单的方法可以使用 babel-require
钩子来做到这一点。
像这样创建 Gulpfile:
'use strict';
// Compile task to ES5 on the fly!
require('babel-register');
// Require all tasks!
require('require-dir')('./tasks', { recurse: true });
并将您的任务放在 tasks
目录中。然后创建一个 .babelrc
文件来加载预设,例如
{
"presets": ["node5"]
}
当您使用节点 v5.x 时。现在你可以使用 ES6 特性了! :)