Gulp EcmaScript-6 - Redux /管道中未处理的流错误

Question

我有一个问题，吞咽试图得到这个应用程序，我发现在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

它通常应该使用ReadMe文件中指示的以下指令启动，但这对我来说并不适用。

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   

吞咽给了我同样的错误

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.中然后一口给了我以下信息：

[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|
-------^

Answer 1

获得“未知选项：.babelrc.presets”的第一个错误来自用于构建项目的错误版本 of babel-core。将版本更新为6.9。版本必须等于预置版-2015年版

Answer 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",

Answer 3

我已经启动了应用程序，并像这样运行

$ 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

非常感谢你的灵感和宝贵的答案！