问题标签 [babel-6]

I have an aurelia application updated to the latest beta, 1.0.0-beta.1.2.1 at the time of this writing. This version of aurelia already uses Babel 6, and my application is based on the based on the ASP.NET 5 ES2016 navigation skeleton.

"All of a sudden", whenever I try to open my untranspiled javascript source files in Chrome (Version 49.0.2623.110 m (64-bit)) Developer tools, for instance main.js, all I get to see is the html of Index.cshtml.
It doesn't matter which javascript file I try to open, it always shows the html of Index.cshtml instead of javascript.

The transpiled files are displayed correctly in Chrome Dev Tools.

I've had this before but it usually meant I had a binding or templating error somewhere, but in this case the application works perfectly, so it probably has to do with the sourcemaps... Or does it?

My questions are:

1. What is the best way to track down a subtle binding or templating error in Aurelia? Everything I've tried to do in my applcation works fine, but I don't want to rule out this being my own fault just yet.

2. In case it's not my fault, has anybody come across this before? What is the reason the sourcemaps are not working; is it Aurelia? is it Babel 6? Is it Chrome?

Update

It doesn't seem to be a Chrome issue; the same problem occurs in Edge.

Update 2

By turning off Enable javascript sourcemaps on Chrome Developer Tools I can debug de transpiled code. The transpilation gulp tasks I'm using are copy/pasted from the version mentioned above.

Has anybody else come across this issue?

在处理许多Aurelia应用程序时，我们达到了需要在这些应用程序之间共享代码的地步。

要共享的代码不是我们（实际上是我们的客户）想要开源的东西。所以我们正在考虑创建私有的 jspm 包，这样我们就可以在需要时轻松地重用我们的模块。这个想法的灵感来自这篇博文

Jspm 也支持链接包，所以这是我们在开发过程中真正希望使用的东西，因为要重用的代码还不够稳定。

带有链接 jspm 包的工作流

所以我们预期的工作流程是使用代码创建不同数量的项目/模块，ES2016并从这些项目中创建 jspm 包。然后这些包将被安装并链接到我们的应用程序中。

转译

据我们所知，在将 jspm 包安装到项目之前需要对其进行转译。因此，如果有任何更改，我们总是需要转译代码。

根据这个systemjs/babel-plugin 文档，将支持动态转译version 0.17（目前处于测试阶段）。目前我们使用的jspm版本0.16.32不支持使用babel 6.

不知何故，这个工作流程感觉过度设计，所以我们考虑在我们的应用程序中进行动态转换，尽管我们担心性能损失。

您将如何es2016在不同的 Aurelia 应用程序之间共享代码？

有没有在不使用 jspm 包的情况下实现代码重用？

我有一个使用以下 .babelrc 配置与 Babel 一起编译的 React 应用程序

该应用程序编译并运行良好。但是，当我调试事件处理程序（特意编写为箭头函数）时，Chrome 调试器将“this”的值显示为 null。这是一个示例事件处理程序

如果我在事件处理程序的第一行设置断点，调试器会将“this”的值显示为 null，但将“_this”显示为“this”的正确值。正如我所说，代码运行干净，但调试令人沮丧，因为我不能简单地将鼠标悬停在代码中的字段上以查看它们的值。如果我将“this”绑定到我的事件处理程序，我可以解决调试问题，但我不应该做那个额外的步骤。所有这些在 Babel5 中都运行良好，并且在我们切换到 Babel6 后才成为问题。

我正在使用 webpack 来捆绑代码并创建源图。这是我的 webpack.config.js 中用于 sourcemaps 配置的摘录

运行 gulpfile 时出现此错误。我假设我的 Babel 版本有问题。

这是我的 package.json

这是我的 .babelrc 文件

我错过了什么？:(

问题是如何在调用超级方法之前从构造函数中访问类静态属性？

出于某种原因，我得到了：

代替

大约一年前我已经问过这个问题了。目前，其中提供的解决方案不再可行。

您可以在babel 控制台中尝试代码。有趣的是，这段代码在没有 babel 的情况下也能正常工作（例如在最新的 Chrome 中），并且当es2015复选框关闭时。

许多消息来源解释说，为此你需要

• 在 WebStorm-Settings (Tools) 中创建一个“File Watcher”-Job
• 在 WebStorm 中为要处理的文件定义“范围”
• 定义一个 .babelrc 文件进行配置。Babel 会自动使用它，所以你可以在调用中保存一些参数

{ "presets": ["es2015", "react"], "plugins": ["transform-es2015-arrow-functions"] }

• npm install --save-dev对应的包和 babel-cli 包一起。

但是...当 babel-cli 模块仅在其 bin 文件夹中提供“babel.js”文件时，我如何在 Windows 上运行 babel-Command？但是 Windows 只能执行 .exe、.bat 或 .cmd 文件。

我试图将调用包装在一个 cmd 脚本中，其中包含babel %*我在一篇网络文章中找到的解决方案，但这对我不起作用。

我正在尝试使用在工作线程中完成处理的反应组件来更新画布。我在 EMCA5 中的所有困难部分都可以正常工作，但是移植到 React/Babel/JSX，我最大的问题是系统不再识别 ArrayBuffer 来将数据传递给工作线程。以下代码因“TypeError：ArrayBuffer 不是构造函数”而死：

在对 babel-polyfill 和 core-js 进行了大量研究之后，我能想到的所有变体都以同样的方式消失：

到目前为止，我发现唯一可行的方法是忘记任何导入/要求，只需访问 ArrayBuffer 就可以了：

..这实际上有效并且显示显示在页面上，但它看起来很难看，我无法想象这是引用 ArrayBuffer 的预期方式。有没有人成功导入 js ArrayBuffer 和相关类，以便可以按预期访问它们？

..OK 遵循 zerkms 的建议，我更新为：

..它可以正常工作 - 我想我之前尝试从 babel-polyfill 导入类名太花哨了。

object-assign更新项目依赖项后，我开始看到此错误， Babel 5 插件似乎存在版本控制问题。

更新后我使用 Babel 6，我能找到的最接近的插件是es6-object-assign，但是使用它会导致错误（错误如下所示）。

在我的应用程序中使用browserify++ babelify：object-assign

服务器日志：

改成时报错，可能是因为babelify在线plugins: ['es6-object-assign']需要原object-assign包：node_modules/babelify/index.jsvar assign = require("object-assign");

我的 webpack2 配置中有一个下划线模板加载器，它是用 babel 转译的。它在编译时失败，因为with在代码编译代码中使用。这是我的装载机中的相关部分webpack.config.js：

我在加载器下有这个部分：

这就是我想要的，我得到：

如果我完全删除该babel部分，它可以工作，但没有转译 ES6 代码：

我也看到了这个关于删除严格模式的问题，并尝试了一些与 es2015 应用严格相关的事情。我想我已经尝试了该问题中的所有解决方案，包括热补丁解决方法，但我仍然遇到同样的错误。最后我尝试了这个：

我虽然这应该与没有 bable pass 的情况相同，但我在这里得到了同样的错误。不知何故，没有任何预设我得到了同样的错误。

编辑

我也尝试通过传入来解决它variable，query并且我已经使用ejs-loader.

我制作了一个说明问题的存储库。主分支已将 babel-loader 注释掉并且可以使用，with而transpile即使{ modules: false }通过了分支也会有编译错误，并且我有一个名为的分支transpile-no-presets，其中 package.json 中的所有预设都被删除并且错误仍然显示。

我已经发布了一个关于此的问题，我设法通过解决方法解决了它，但现在我有多个 UMD 模块、第三方模块，并且我自己更改模块以使其转换不再有意义。

这就是我的 .babelrc 的样子

我正在使用带有 webpack 4 的 babel 6。我的 webpack.config 看起来像这样

babelrcWithoutModules是从 babelrc 读取的 JSON 对象，预设"es2015"替换["es2015", { modules: false }]为 以确保它在脚本模式下运行并且 babelrc 设置为 false，所以本质上是这样

使用此配置，来自“vendor”目录的具有以下内容的文件主干.fetch-cache.js

转译到这个

请注意这是如何变得未定义的。

我怎样才能使它正确地转译 UMD 模块？