Gulp - Babel - EcmaScript-6 - 管道中的Redux / Unhandled流错误

时间：2016-06-16 08:25:11

标签： gulp ecmascript-6 redux babel

我遇到了gulp试图获取我在GitHub上找到并运行的应用程序的问题。

https://github.com/simpulton/eggly-redux

如果有人有兴趣看看这个，我感激不尽。 非常感谢提前。

我的回购包含调整后的package.json和添加的.babelrc文件就在这里。

https://github.com/mehmettugrulsahin/eggly-redux

快速查看的配置文件如下：

https://rawgit.com/mehmettugrulsahin/eggly-redux/master/package.json
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/webpack.config.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/gulpfile.babel.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/.babelrc

通常应该按照自述文件中指示的以下说明启动，但这对我来说无效。

git clone https://github.com/simpulton/eggly-redux.git
cd eggly-redux
npm i
gulp

已经提出过类似的问题。我经历过一切 可以从这里的答案找到，但没有运气。这就是我的原因 问一个新问题。

以下是我在完成所有调查结果时所做的工作 我安装了以下内容以防万一它无法正常工作 第一名.. 

npm install -g npm  
npm install -g webpack  
npm install -g gulp  
npm install -g babel  
npm install -g browser-sync  
npm install browser-sync --save-dev  
npm install babel --save-dev  
npm install babel-register --save-dev  
npm install babel-preset-es2015 --save-dev   
npm uninstall babel  
npm install --global babel-cli  
npm install babel-cli --save-dev

而且gulp仍然给我同样的错误

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: ModuleBuildError: Module build failed: ReferenceError: [BABEL] C:\projects-mts\@eggly-redux\client\app\app.js: Unknown option: C:\projects-mts\@eggly-redux\.babelrc.presets
    at Logger.error (C:\projects-mts\@eggly-redux\node_modules\babel-core\lib\transformation\file\logger.js:58:11)
    at OptionManager.mergeOptions (C:\projects-mts\@eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29)
    at OptionManager.addConfig (C:\projects-mts\@eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10)
    at OptionManager.findConfigs (C:\projects-mts\@eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35)
    at OptionManager.init (C:\projects-mts\@eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12)
    at File.initOptions (C:\projects-mts\@eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:147:75)
    at new File (C:\projects-mts\@eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:137:22)
    at Pipeline.transform (C:\projects-mts\@eggly-redux\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
    at transpile (C:\projects-mts\@eggly-redux\node_modules\babel-loader\index.js:12:22)
    at Object.module.exports (C:\projects-mts\@eggly-redux\node_modules\babel-loader\index.js:71:12)

我发现这与

中的这项任务有关 
gulpfile.babel.js
    // use webpack.config.js to build modules
    gulp.task('webpack', () => {
      return gulp.src(paths.entry)
        .pipe(webpack(require('./webpack.config')))
        .pipe(gulp.dest(paths.output));
    });

所以我改变了

.pipe(webpack(require('./webpack.config')))

到

.pipe(webpack(require('webpack-stream')))
gulpfile.babel.js 中的

。然后gulp给了我以下内容：

[20:52:57] Requiring external module babel-register
(node:9156) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[20:52:58] Using gulpfile C:\projects-mts\@eggly-redux\gulpfile.babel.js
[20:52:58] Starting 'default'...
[20:52:58] Starting 'webpack'...
[20:52:58] Version: webpack 1.13.1
                  Asset     Size  Chunks             Chunk Names
43db048c592b328cbb29.js  2.16 kB       0  [emitted]  main
[20:52:58] Finished 'webpack' after 366 ms
[20:52:58] Starting 'serve'...
[20:52:59] Finished 'serve' after 75 ms
[20:52:59] Starting 'watch'...
[20:52:59] Finished 'watch' after 46 ms
[20:52:59] Finished 'default' after 494 ms
[BS] Access URLs:
 ------------------------------------
Local: http://localhost:3000  
External: http://192.168.2.2:3000  
 ------------------------------------
UI: http://localhost:3001  
UI External: http://192.168.2.2:3001  
 ------------------------------------
[BS] Serving files from: client

以及名为

的文件

https://rawgit.com/mehmettugrulsahin/eggly-redux/master/client/43db048c592b328cbb29.js

而不是 bundle.js ，我的浏览器说

"NetworkError: 404 Not Found - http://localhost:3000/bundle.js"
if I rename that file to bundle.js then browser gives me
SyntaxError: import declarations may only appear at top level of a module
import 'bootstrap-css-only';

我的版本如下：

$ npm -v  
3.9.5  

$ gulp -version  
[20:59:02] Requiring external module babel-register  
[20:59:02] CLI version 3.9.1  
[20:59:02] Local version 3.9.1  

$ webpack -v  
Hash: 396f0bfb9d565b6f60f0  
Version: webpack 1.13.1  
Time: 15ms

在我尝试以下操作后，我注意到了您的评论：

删除了node_modules目录

npm install babel babel-register babel-cli babel-core babel-loader babel-preset-es2015 babel-preset-es2015-webpack browser-sync gulp gulp-rename gulp-template webpack webpack-stream css-loader raw-loader style-loader stylus-loader url-loader --save-dev

npm i

现在我得到了一些其他错误。我想我取得了一些进展

$ gulp
[15:24:35] Requiring external module babel-register
(node:12704) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[15:24:36] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[15:24:36] Starting 'default'...
[15:24:36] Starting 'webpack'...

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: ./~/css-loader!./~/stylus-loader!./client/app/app.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\app.styl:37:1
   33|   from
   34|     opacity 0
   35|   to
   36|     opacity 1
   37|
-------^

Path must be a string. Received undefined

    at assertPath (path.js:7:11)
    at extname (path.js:887:5)
    at new SourceMapper (C:\projects-mts\eggly-redux\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
    at Renderer.render (C:\projects-mts\eggly-redux\node_modules\stylus\lib\renderer.js:94:9)
    at C:\projects-mts\eggly-redux\node_modules\stylus-loader\index.js:149:12
    at tryCatchReject (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:840:30)
    at runContinuation1 (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:799:4)
    at Fulfilled.when (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:590:4)
    at Pending.run (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:481:13)
    at Scheduler._drain (C:\projects-mts\eggly-redux\node_modules\when\lib\Scheduler.js:62:19)
 @ ./client/app/app.styl 4:14-122./~/css-loader!./~/stylus-loader!./client/app/components/categories/categories.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\components\categories\categories.styl:35:1
   31|     overflow-x hidden
   32|     overflow-y auto /* Scrollable contents if viewport is shorter than content. */
   33|     background-color #2B2828
   34|     border-right 1px solid #7B807E
   35|
-------^

3 个答案:

答案 0 :(得分：2)

你得到的第一个错误＆＃34;未知选项：.babelrc.presets＆＃34;来自用于构建项目的babel-core wrong version。将版本更新为6.9。版本必须等于babel-preset-es2015 version

答案 1 :(得分：2)

是的，@ Damien Leroux是对的。

您使用.babelrc文件更改了原始项目。项目中的babel版本尚不了解presets设置。如果您将babel-core更新为当前版本，则可以使用。请注意，您还必须更新babel-loader：

npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev

在此之后它对我有用。您的package.json现在应该更新： "devDependencies": { "babel-core": "^5.4.2", "babel-loader": "^5.0.0",

现在 "devDependencies": { "babel-core": "^6.9.1", "babel-loader": "^6.2.4",

答案 2 :(得分：2)

我得到了这样的应用程序并且像这样运行

$ gulp
[21:16:33] Requiring external module babel-register
(node:10132) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[21:16:34] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[21:16:34] Starting 'default'...
[21:16:34] Starting 'webpack'...
[21:16:40] Version: webpack 1.13.1
        Asset     Size  Chunks             Chunk Names
    bundle.js  2.36 MB       0  [emitted]  main
bundle.js.map  2.74 MB       0  [emitted]  main
[21:16:40] Finished 'webpack' after 5.19 s
[21:16:40] Starting 'serve'...
[21:16:40] Finished 'serve' after 102 ms
[21:16:40] Starting 'watch'...
[21:16:40] Finished 'watch' after 56 ms
[21:16:40] Finished 'default' after 5.37 s

[BS] Serving files from: client

应用以下内容：

npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm uninstall stylus --save-dev
npm uninstall stylus-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install stylus --save-dev
npm install stylus-loader --save-dev

非常感谢您的灵感和有价值的答案！

相关问题
最新问题