无法在 gulpfile 中使用 es6 [重复]

Question

我正在尝试在 ES6 中编写我的 gulpfile.babel.js，但运行脚本会出错。

package.json:

{
"dependencies": {
    "async": "^2.1.2",
    "bcrypt-nodejs": "^0.0.3",
    "body-parser": "^1.15.2",
    "browser-sync": "^2.18.2",
    "chalk": "^1.1.3",
    "cheerio": "^0.22.0",
    "clockwork": "^0.1.4",
    "compression": "^1.6.2",
    "connect-mongo": "^1.3.2",
    "dotenv": "^2.0.0",
    "errorhandler": "^1.4.3",
    "express": "^4.14.0",
    "express-flash": "^0.0.2",
    "express-session": "^1.14.2",
    "express-status-monitor": "^0.1.5",
    "express-validator": "^2.21.0",
    "fbgraph": "^1.3.0",
    "github": "^6.0.2",
    "instagram-node": "^0.5.8",
    "lastfm": "^0.9.2",
    "lob": "^3.9.0",
    "lodash": "^4.16.6",
    "lusca": "^1.4.1",
    "mongoose": "^4.6.6",
    "morgan": "^1.7.0",
    "multer": "^1.2.0",
    "node-foursquare": "^0.3.0",
    "node-linkedin": "^0.5.4",
    "node-sass-middleware": "^0.9.8",
    "nodemailer": "^2.6.4",
    "passport": "0.3.2",
    "passport-facebook": "^2.1.1",
    "passport-github": "^1.1.0",
    "passport-google-oauth": "^1.0.0",
    "passport-instagram": "^1.0.0",
    "passport-linkedin-oauth2": "^1.4.1",
    "passport-local": "^1.0.0",
    "passport-oauth": "^1.0.0",
    "passport-openid": "^0.4.0",
    "passport-twitter": "^1.0.4",
    "paypal-rest-sdk": "^1.7.0",
    "pug": "^2.0.0-beta6",
    "request": "^2.78.0",
    "stripe": "^4.12.0",
    "tumblr.js": "^1.1.1",
    "twilio": "^3.3.1-edge",
    "twit": "^2.2.5",
    "validator": "^6.1.0"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.20.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-es2016": "^6.16.0",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-register": "^6.18.0",
    "browser-sync": "^2.18.2",
    "chai": "^3.5.0",
    "eslint": "^3.12.0",
    "eslint-config-airbnb-base": "^10.0.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-watch": "^2.1.14",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-load-plugins": "^1.4.0",
    "gulp-newer": "^1.3.0",
    "gulp-nodemon": "^2.2.1",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-util": "^3.0.7",
    "mocha": "^3.1.2",
    "sinon": "^1.17.6",
    "sinon-mongoose": "^1.3.0",
    "supertest": "^2.0.1"
  },
}

Gulpfile.babel.js：

import gulp from 'gulp';
import nodemon from 'gulp-nodemon';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';
import browserSync from 'browser-sync';
const paths = {
  js: ['./**/*.js', '!dist/**', '!node_modules/**', '!coverage/**'],
  nonJs: ['./package.json', './.gitignore'],
  tests: './server/tests/*.js'
};

// Clean up dist and coverage directory
gulp.task('clean', () =>
  del(['dist/**', 'coverage/**', '!dist', '!coverage'])
);

// Copy non-js files to dist
gulp.task('copy', () =>
  gulp.src(paths.nonJs)
    .pipe(plugins.newer('dist'))
    .pipe(gulp.dest('dist'))
);

// Compile ES6 to ES5 and copy to dist
gulp.task('babel', () =>
  gulp.src([...paths.js, '!gulpfile.babel.js'], { base: '.' })
    .pipe(plugins.newer('dist'))
    .pipe(plugins.sourcemaps.init())
    .pipe(plugins.babel())
    .pipe(plugins.sourcemaps.write('.', {
      includeContent: false,
      sourceRoot(file) {
        return path.relative(file.path, __dirname);
      }
    }))
    .pipe(gulp.dest('dist'))
);

// Start server with restart on file changes
gulp.task('nodemon', ['copy', 'babel'], () =>
  plugins.nodemon({
    script: path.join('dist', 'index.js'),
    ext: 'js',
    ignore: ['node_modules/**/*.js', 'dist/**/*.js'],
    tasks: ['copy', 'babel']
  })
);

// gulp serve for development
gulp.task('serve', ['clean'], () => runSequence('nodemon'));

// default task: clean dist, compile js files and copy non-js files.
gulp.task('default', ['clean'], () => {
  runSequence(
    ['copy', 'babel']
  );
});

我也正确设置了 .babelrc 文件。运行 gulp serve 会导致 es6 import 关键字出错。我该怎么办？

错误：

[16:37:37] Requiring external module babel-register
/home/cortana/Projects/JSProjects/express-boilerplate/gulpfile.babel.js:1
(function (exports, require, module, __filename, __dirname) { import gulp from 'gulp';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at loader (/home/cortana/Projects/JSProjects/express-boilerplate/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/cortana/Projects/JSProjects/express-boilerplate/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Liftoff.handleArguments (/usr/lib/node_modules/gulp/bin/gulp.js:116:3)

.babelrc:

{
  "presets": ["es2016", "stage-2"],
  "plugins": ["add-module-exports"],
  "env": {
    "production": {
      "presets": ["react-optimize"],
      "plugins": ["babel-plugin-dev-expression"]
    },
    "development": {
      "presets": []
    },
    "test": {
      "plugins": [
        ["webpack-loaders", { "config": "webpack/webpack.config.test.js", "verbose": false }]
      ]
    }
  }
}

Answer 1

您的.babelrc 文件不包含es2015 预设，因此import 语法不会被转译。

这就是您的.babelrc 文件的外观：

{
  "presets": ["es2015", "es2016", "stage-2"],
  "plugins": ["add-module-exports"],
  "env": {
    "production": {
      "presets": ["react-optimize"],
      "plugins": ["babel-plugin-dev-expression"]
    },
    "development": {
      "presets": []
    },
    "test": {
      "plugins": [
        ["webpack-loaders", { "config": "webpack/webpack.config.test.js", "verbose": false }]
      ]
    }
  }
}