运行gulp以将es6转换为es5

时间:2016-06-23 15:47:46

标签: javascript gulp gulp-babel

我有一个简单的javascript文件:

'use strict';

const sentences = [
    {subject: 'Javascript', verb: 'is', object: 'great'}
    {subject: 'Elephants', verb: 'are', object: 'large'}
];

function say ({subject, verb, object}){
    console.log(`${subject} ${verb} ${object}`);
}

for(let s of sentences){
    say(s);
}

我已经安装了gulp用于转发编译。这是我的gulp文件:

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', function(){
    gulp.src("es6/**/*.js").pipe(babel()).pipe(gulp.dest("dist"));
    gulp.src("public/es6/**/*.js").pipe(babel()).pipe(gulp.dest("public/dist"));
});

我的javascript文件位于' es6'和一个公共/ es6'文件夹。因此,当我运行gulp命令时,它应该可以工作,但它会给我这些错误:

Joaos-MacBook-Air:chapter2 joaovictor$ gulp
[12:44:06] Using gulpfile ~/Desktop/javascript/chapter2/gulpfile.js
[12:44:06] Starting 'default'...
[12:44:06] Finished 'default' after 12 ms

events.js:141
      throw er; // Unhandled 'error' event
      ^
SyntaxError: /Users/joaovictor/Desktop/javascript/chapter2/.babelrc: Error while parsing JSON - Unexpected ''
    at JSON5.parse.error (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:50:25)
    at JSON5.parse.word (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:378:13)
    at JSON5.parse.value (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:478:56)
    at Object.parse (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:491:18)
    at OptionManager.addConfig (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:225:62)
    at OptionManager.findConfigs (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:436:16)
    at OptionManager.init (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:484:12)
    at File.initOptions (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:223:65)
    at new File (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:140:24)
    at Pipeline.transform (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/pipeline.js:46:16)

我在这里缺少什么?

1 个答案:

答案 0 :(得分:0)

我认为某些软件包未安装或不兼容,无论如何,您应确保已安装所有开发依赖项,并且源代码可在Babel文档网站[https://babeljs.io/setup];上找到。 因此您的package.json文件和.baberlc文件应如下所示:

{
  "name": "nu",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0-beta.2"
  }
}
{
    "presets": ["@babel/preset-env"]
}

所以运行您的代码...应该可以正常工作!!!