如何使用 gulp 和 babel 将 .jsx 文件编译为 .js？

Question

我不完全确定如何使用 babel 和 gulp 并将一些 react jsx 文件编译为 JavaScript。

我已经安装了nodejs，babel-cli，gulp-babel，babel-preset-react，和babel-preset-es2015

节点模块出现在我的工作目录中，一切似乎都在那里。

我的package.json 文件如下所示：

{
  "name": "example1",
  "version": "1.0.0",
  "babel":{
    "presets": ["react", "es2015"]
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.7.5",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "gulp-babel": "^6.1.2"
  }
}

而我的gulpfile.js 看起来像这样：

var gulp = require('gulp');
var react = require('gulp-react');
var concat = require('gulp-concat');
var babel = require("gulp-babel");

gulp.task('default', function(){
    return gulp.src('src/**').pipe(react()).pipe(concat('application.js')).pipe(gulp.dest(' ./'))
});

我相信这是能够将我的文件编译为 JavaScript 所需的所有设置。但是，当我尝试 npm run gulp 时，从命令提示符中，我得到以下输出，但我不确定如何解释：

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "gulp"
npm ERR! node v4.4.2
npm ERR! npm  v2.15.0

npm ERR! missing script: gulp
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Cossie\Desktop\INFO30005 mockup\react\Example 1\npm-debug.log

我该怎么做才能让我的 .jsx 反应文件编译成 .js？

编辑：

在package.json 的脚本下添加"gulp":"gulp" 然后运行npm run gulp 给我：

module.js:327
    throw err;
    ^

Error: Cannot find module 'gulp-react'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Users\Cossie\Desktop\INFO30005 mockup\react\Example 1\gulpfile.js:2:13)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "gulp"
npm ERR! node v4.4.2
npm ERR! npm  v2.15.0
npm ERR! code ELIFECYCLE
npm ERR! example1@1.0.0 gulp: `gulp`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the example1@1.0.0 gulp script 'gulp'.
npm ERR! This is most likely a problem with the example1 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs example1
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR!     npm owner ls example1
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Cossie\Desktop\INFO30005 mockup\react\Example 1\npm-debug.log

Answer 1

如果您想使用 npm run gulp 从项目本地安装运行 gulp，您必须将 gulp 脚本添加到您的 package.json：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  "gulp": "gulp"
},