如何使用gulp和babel將.jsx文件編譯爲.js？

Question

我不完全確定如何使用babel和gulp並編譯一些反應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腳本到你的package.json：

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