问题标签 [babeljs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2163 浏览

module - 在 ES6 模块中通过字符串访问导出的函数

考虑以下:

这在使用 babel 转换节点模块时有效,因为它将所有内容都粘贴在导出对象上。vanilla ES6中是否有导出对象的概念?我希望能够使用其名称的字符串调用方法。

我想到的一件事就是将所有功能粘贴在一个对象上并单独导出它们。另一种选择是使用一些邪恶的 eval 东西。是否有任何标准方法可以通过字符串访问当前模块中的 ES6 导出?

0 投票
11 回答
138390 浏览

webpack - “代码生成器已取消优化 [some file] 的样式,因为它超过了“100KB”的最大值”是什么意思?

我在我的项目中添加了一个新的 npm 包,并在我的一个模块中需要它。

现在我从 webpack 收到这条消息,

build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB".

这是什么意思?我需要采取一些措施吗?

0 投票
19 回答
82924 浏览

javascript - 无法在事件处理程序中访问 React 实例(this)

我正在用 ES6(使用 BabelJS)编写一个简单的组件,但函数this.setState不起作用。

典型的错误包括类似

无法读取未定义的属性“setState”

或者

this.setState 不是函数

你知道为什么吗?这是代码:

0 投票
3 回答
9186 浏览

javascript - 能够中止异步调用

我正在使用 babeljs 和 es7 风格的 async/await 方法。我有一个主脚本,它将在所有返回承诺的对象数组上调用异步方法。我使用 Promise.all() 等待所有这些任务返回,但是,这些任务可能需要很长时间,如果它们超过阈值,我想中止所有这些任务,并且任务以适当的方式处理。

有没有办法完成这样的事情?目前我能想到的唯一方法是生成一个进程来完成调用这些方法的工作并等待它们全部解决,如果达到时间限制,它可以终止进程并执行它需要的任何处理。

更新:关于主脚本正在等待的这些方法的一些说明......他们可能正在执行一系列操作(调用外部系统,在某处流式传输文件等)并且没有执行可以独立取消的单个操作。

更新#2:一些未经测试的半伪代码

0 投票
1 回答
282 浏览

ecmascript-6 - 在现有项目中使用 babeljs 编译文件

我有一个用 ES6 编写的简单类

我通过编译该代码到 ES5 babel MyClass.es6 > MyClass.js,然后尝试在我现有的 ES5 代码库中使用它:

但是我收到一条错误消息,指出 t 没有方法 allValues。我正在尝试做的事情可能吗?

0 投票
0 回答
240 浏览

reactjs - Chrome 源面板中的这些灰线是什么?

在此处输入图像描述

我正在使用browserify -> babelify -> uglify2. 这react_app.jsx实际上是从源地图加载的。

进一步的实验编辑:

  • 纯js-> browserify:否
  • jsx -> 使用 reactify 进行浏览器化:是
  • jsx -> 使用 babelify 进行浏览器化:是

所以它是关于 jsx 的?

更多实验

这是关于从 jsx 到 js 的源映射。我正在使用reactify 0.17并且效果很好。但是将reactify 1.0源映射选项硬编码为true. 有一个悬而未决的问题

chrome ofreactify 0.17中的视图就像没有灰线:

chrome ofreactify 1.0中的视图类似于灰色线条,并且断点有时不起作用!:

我可以重现灰线。但是非工作断点是不可预测的。babelify默认情况下,源映射“打开”,因此它的行为类似于reactify 1.0.

我认为@SteveB @AndersNS 是正确的,它是构成这些灰线的铬。而且由于它们不是真正的线条,因此断点的行为很奇怪。

TL;博士;

reactify 1.0.jsx从to实现源映射.js。chrome 开发工具尊重该源映射,但似乎与它不完全兼容。

0 投票
1 回答
2885 浏览

gulp - Watchify w/gulp 和 babel 变得越来越慢

每次 watchify 检测到更改时,捆绑时间都会变慢。我的 gulp 任务一定有问题。有人有什么想法吗?

0 投票
1 回答
60 浏览

gulp - Gulp 脚本构建导致额外的右括号

我将 Gulp 与generator-gulp-angular一起使用。我在其他几个项目中使用相同的生成器并且工作得很好。我启动了一个新项目并决定使用 ES6 代替 CoffeeScript,这是我在其他项目中使用的。

不幸的是,当我做 a 时grunt serve,这是我在结尾看到的.tmp/serve/app/index.js

最后一个}也不])应该在那里。我收到一条错误消息,说明Uncaught SyntaxError: Unexpected token }它们何时存在。当我删除它们时,一切正常。

我什至不知道如何解决这个问题。可能有什么问题?

0 投票
1 回答
1755 浏览

javascript - 反应 ES6 | 子组件未呈现

我正在尝试使用 React 从 firebase 渲染一个数组。我有一个容器视图,它从 firebase 获取数据,并将数据传递给子组件。这是代码:

容器.jsx

这成功地获取了数据(加载),并且 console.logs 相同。

下面是子组件的代码:

LoadsTable.jsx

这里的问题是没有渲染任何内容,事实上,构造函数中的 console.log 从未被调用。如果我 console.log 容器构造函数中的 LoadsTable,我得到:

Chrome 开发者控制台输出

所以,我的问题是:有人知道我在这里做错了什么以及为什么 LoadsTable 没有被实例化吗?

我正在使用 Gulp 构建和 babelify 来转译 ES6。

对此的任何帮助将不胜感激。提前致谢。

0 投票
1 回答
202 浏览

webpack - Webpack 加载器摆脱 es6/7 中的括号

去年我们一直在使用 CoffeeScript,并且真正开始喜欢空白而不是花括号。

ES6/7 和babel开始看起来很酷,不幸的是,CoffeeScript在合并新功能方面似乎有点不情愿/缓慢。(可能部分是因为这样做不太容易)。

我们正在考虑创建一个 webpack 加载器的可能性,该加载器将作为第一步运行,只需查看 js 文件并根据缩进在需要的地方添加大括号。像这样,我们可以编写 es6/7 代码,但不必在源代码中编写(和阅读!!)那些丑陋的括号:)

有没有人有这样的尝试?这样做你会看到什么后果?