Fatal编程技术网
  • gulp/
  • Gulp-Babel-EcmaScript-6-管道中重复/未处理的流错误

Gulp-Babel-EcmaScript-6-管道中重复/未处理的流错误

gulp ecmascript-6 redux

Gulp-Babel-EcmaScript-6-管道中重复/未处理的流错误,gulp,ecmascript-6,redux,babeljs,Gulp,Ecmascript 6,Redux,Babeljs,gulp试图让我在GitHub上找到的这个应用程序启动并运行时遇到问题 如果有人有兴趣看一下，我将不胜感激。 非常感谢 这里是我的repo，其中包含调整后的package.json和添加的.babelrc文件 快速查看的配置文件如下： 它通常应该按照自述文件中指示的以下说明启动，但这对我来说不起作用 git clone https://github.com/simpulton/eggly-redux.git cd eggly-redux npm i gulp 类似的问题已经被提出。

gulp试图让我在GitHub上找到的这个应用程序启动并运行时遇到问题

如果有人有兴趣看一下，我将不胜感激。 非常感谢

这里是我的repo，其中包含调整后的package.json和添加的.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')))
到

在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
以及一个名为

而不是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
我在尝试以下操作后注意到您的评论：

已删除节点\u模块目录

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|
-------^
您得到的第一个错误“Unknown option:.babelrc.presets”来自用于构建项目的babel core版本。将版本更新为
6.9
。版本必须等于

是的，@Damien Leroux是正确的

您使用
.babelrc
文件更改了原始项目。项目中的babel版本尚不了解
预设设置。如果您将
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：


“依赖性”：{
“巴别塔核心”：“^5.4.2”，
“巴别塔加载器”：“^5.0.0”，


现在是


“依赖性”：{
“巴别塔核心”：“^6.9.1”，
“巴别塔加载器”：“^6.2.4”，

我让应用程序像这样启动并运行


$ 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



非常感谢您的启发和宝贵的答案！
谢谢Damien。不幸的是，这本身并没有帮助。但我得到了启发并重新安装了某些库。我在问题的末尾添加了我所做的。我认为我取得了进展。现在webpack似乎对给定的加载程序不满意。有什么想法吗？这是我的承诺编号想法抱歉。可能正在写一篇关于这个问题的新帖子，可能会给更多的人更多的答案：）我可以用同样的方法解决，但这次是通过卸载和重新安装触控笔和触控笔加载程序。再次感谢：）感谢巴特，这并没有解决我的问题，但我受到启发，重新安装了我怀疑的大多数软件包泰德，现在我发现了一些新的错误。显然，出于某种原因，webpack对加载程序不满意。你知道这可能是什么吗？这是我的承诺Hmpphh..停止更改所有内容！就像我说的，它在我的机器上工作。如果你不更改任何内容，你能首先确认原始软件包工作吗？：）我认为它在我这台机器上不工作ime是因为触控笔和触控笔加载器版本。我重新安装了它们，就像您使用babel core和babel loader一样，我成功地启动并运行了应用程序。虽然浏览器报告了一些错误。但到目前为止还不错。显然卸载和重新安装某些软件包会有所不同。谢谢！

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