问题标签 [gulp-babel]

我有我的反应组件，现在当我通过 gulp 启动服务器时，它会抛出这个错误......

这是组件的样子：

我假设它与我的 gulpfile.js 中的 babel 有关，我只是不确定它是什么。其他一切都很好......但是渲染组件变得很奇怪......

我究竟做错了什么？

我的 gulp 构建脚本中有 gulp-babel 任务，它运行良好，直到我删除了 node_modules 目录并再次运行 npm install。它回来了

并且错误日志指出错误标记如下：

如果我直接j.js使用 cli编译babel j.js，将不会收到错误消息并按预期返回编译代码。

我的吞咽任务代码：

我的 .babelrc ：

我的 npm 依赖项：

我是否使用了错误版本的某些包，或者您可以向我发布详细教程或代码笔的链接，其中这种语法构造不会给我一个错误？

我收到此错误：

我已经阅读了这个问题，但是'use strict';在我的 gulpfile 中，并且将 const 更改为 let 对我没有用。

我的全局安装包：

我的节点是v4.0.0我在项目中使用的 gulp：

我使用 Gulp 作为任务管理器，使用 Babel 将我的 ES6 程序转换为浏览器可以理解的版本，而不是 Node！

在src/app.js我有：

但是，当我运行 gulp 时，它会生成一个文件，dist但会将文件import中的app.js文件转换require为浏览器无法理解的关键字......我认为 bable 会将文件合并imported到src/app.js一个文件中dist

如何将我的库代码转换为使用 Babel 的浏览器支持？

我是 javascript 和 javascript 构建脚本的新手，我正在尝试构建一个“面向未来”的构建脚本来构建 ReactJS/Redux 应用程序。我无法让导入在 javascript 文件之间工作。

我的问题是添加对 es2016 样式导入语句的支持的推荐方法是什么？

当我一直在努力使这项工作正常进行时，这些问题和评论在我脑海中盘旋，有助于为我的出发点着色。

• 我刚刚对 Gulp 感到更舒服了。是否可以只使用 Gulp、Babel 和 npm 来添加对 es2016 样式导入语句的支持？
• 我想知道 Gulp 是否仍然是构建 javascript 包的推荐方法，还是我应该学习 WebPack。
• 过去，我曾经使用 Browserify 来包含其他 javascript 文件，但我听说有人提到你可以用纯 npm 做 Browserify 所做的事情，而且 Browserify 可能会失宠。
• 我注意到很多使用 WebPack 的 ReactJS 示例。我不确定 WebPack 适合在哪里或是否有必要。我想知道 WebPack 是否取代了 Browserify 以及我是否需要 WebPack 或者我是否可以不用它。
• 我更喜欢使用推荐的任何导入语法。我相信 Browserify 使用 require() 而 es2015 语法使用“import ... from”。我想知道“import ... from”是否是现在用于导入的推荐语法，或者我是否应该使用其他语法。
• 我一直在尝试使用 Babel 6 来使用 es2015 风格的代码。我注意到它没有预处理导入语句，我想我在某处读到 Babel 6 删除了对导入语句的支持。我想知道用什么来代替它来预处理导入语句。
• 我有兴趣最小化配置（点文件等）的数量来构建一个基本项目。

下面是一个简单的例子，我一直在尝试使用 Gulp。目前，当 Gulp 运行时，它会创建一个包，但 import 语句似乎不起作用。当我尝试加载 index.html 时，所有内容看起来都连接在一起，并且出现 javascript 错误。

更多 package.json

更多 gulpfile.js

更多 src/test.js

更多 src/lib.js

更多 index.html

构建步骤

我无法在 gulp 上设置一个简单的任务。我想传递文件gulp-babel以运行脚本，但end从未调用过回调。

我也试过了finish。唯一调用的回调是data，但它对我不起作用，因为我需要在所有文件都通过 babel 运行后运行它。

gulp-debug显示文件已正确找到。

有什么硬仗吗？

我正在构建一个 gulp 脚本来处理我的 ES2015 代码，最终使用反应，但它根本不起作用。Uglify 抛出错误。(stream.js:74 throw er; // 管道中未处理的流错误。)当我查看构建时，很明显 ES2015 代码没有被转换。

此问题的大多数解决方案都涉及缺少的预设。我确保包括babel-preset-es2015. 我有一个 .babelrc 文件，内容如下：

没有它，我的 `gulpfile.babel.js 将无法运行。

我要处理的文件非常简单：

当它变成早期的 JavaScript 时，let应该被替换为var. 也许我的有什么问题gulpfile.babel.js？

我的 gulp 版本是 3.9.1 我的节点版本是 6.2.0

到目前为止，这些是我的依赖项：

更新：所以我去为 Babel 创建了一个单独的任务，它可以工作。当我添加 uglify 并重命名它时，它可以工作，但是当我添加 Webpack 时，它有问题。显然，Webpack 表现不佳。有没有其他人在使用 Webpack 和 gulp 时遇到过这种麻烦？

这真让我抓狂。我负责开发并需要合并分支，但正是在我的机器上，只有某些东西不起作用。

我已经多次删除node_modules并运行npm install，甚至完全克隆了 repo 并重新设置了所有内容，但我总是会遇到同样的问题。

有人将代码与 ES6 合并，所以我们需要对其进行转译，因为 minifier 插件不适用于 ES6 代码。

所以我们使用gulp-babel

running gulp prod，对每个人都有效，但对我来说，我得到：

"latest"首先，如果在我们使用的代码中，为什么要抱怨es2015. 我去另一台计算机上运行了所有东西，它工作的地方，我发现了一些令人惊讶的事情：

在我的机器上：

另一方面：

它们不一样！！！！ 这怎么可能？我的意思是我在两台机器上使用了完全相同的命令，对每个人都是一样的，除了andpackage.json之外没有其他命令已经运行（我什至使用 gulp from ）npm installgulp prodnode_modules/.bin/gulp

我唯一能想到的事情是： - 有一些二进制文件可能会导致问题 - 节点或 npm 版本？在此处使用节点 5.1 - 一些并发问题，因为我的 PC 使用的是 SSD 存储？

供参考，在这里package.json

我正在尝试创建一个可以转换的 gulp 任务

TS -> (ES6) -> Babel -> (ES5) -> Webpack -> [bundle.js, bundle.js.map]

源映射映射回原始 TS 代码的位置。

我怎么能用 gulp 做到这一点？

到目前为止，我已经设法让它从TS -> ES6 -> Babel -> ES5

但是不知道如何将 webpack 添加到组合中。

查看诸如此类的表格：http: //kangax.github.io/compat-table/es6/

看起来 Chrome 真的很接近支持很多 ES6，这意味着（在我看来）我应该能够在开发过程中放弃以下内容：

使用 browserify 时：

并有望加快构建时间。在构建生产时，显然仍然需要转译。

但是，当我退出 es2015 预设时，browserify 会阻塞构建，不理解.... 这是有道理的，但是是否可以在仅针对 Chrome 时运行 browserify？（即允许 Chrome 当前理解的令牌/运算符/功能）。