问题标签 [babel-register]

我有一组“主要是 JSX”的文件，如果直接解释为 JSX，则包含非法语法。我还有一组（同步）函数可以采用这种“大部分”JSX 语法并将其转换为正确的 JSX 语法。这些函数目前用作 webpack 加载器，以确保当 webpack 将数据交给 babel 时，它是正确的 JSX。

例如，这些函数将以下“几乎是 JSX”（其中包含与 JSX 冲突的 LaTeX 代码以及与 JSX 冲突的语法放在一个<pre>块中：

进入以下“实际 JSX”：

运行这些函数后，LaTeX 已被解析并替换为指向其相应静态资产图像的链接，因此不再存在 JSX 语法冲突，并且该<pre>元素已将任何冲突字符替换为 JSX 安全的 html 实体，并且为了保留换行符（因为缩小是空白的敌人），在每行的末尾都给出了明确的换行符。

但是，为了使用 Node.js 进行一些服务器端页面生成，我要求babel-registerNode 可以“本地”加载 JSX 文件，但这是一个问题，因为它会看到大部分 JSX 语法并抛出错误。

作为基本测试脚本，我使用以下代码：

对于干净的 JSX 文件，这不会造成任何问题，但对于需要预处理的文件，这会导致 Babel 抛出终端错误。所以：

有没有办法告诉babel-register在要求节点通过require(...)调用加载的文件上运行预处理器？

I've read through the babel docs but I can't seem to find any section on preprocessing; there are plugins, but these kick in after Babel has already parsed files into ASTs, and the almost-JSX syntax makes Babel error out while trying to build an AST.

Alternatively, is there a way to hook into Node's own file loader so that if it's being asked to load js/jsx files, I can run my preprocessors first and then tell node to pass the transformed data on to whoever handles these filetypes (in this case babel)?

我开发了一个使用 ES2015 代码和 babel 作为编译器的 javascript CLI 应用程序。(babel-require 钩子)

该应用程序在本地完美运行，但是当我在 npm 上发布时，它停止工作（babel 似乎不再编译 ES2015 文件）

设置：

示例./bootstrap.js（ES5）：

样本./src/app.js（ES2015）：

样品./bin/myapp：

在本地运行有效：

全局运行（在 npm install 之后）中断：

版本：

我试过的：

• 添加ignore: false我的.babelrc文件，希望它能启用编译
• 在需要钩子参数中使用选项而不是.babelrc文件

没运气 ：/

我正在开发一个 Angular2+ES2015+Babel+Webpack 项目，当我在 CSS 文件中包含图像并使用时遇到了这个问题css-loader，已经花了好几个小时来寻找这个问题，但到目前为止还没有运气：

如果您搜索错误，您会在 github 问题和 stackoverflow 上找到类似的情况，但并不完全相同。在所有这些中，都指出了缺少图像加载器（此处为 png 文件），但在我的情况下，我有一个工作正常。如果require('../image/penguin.png')直接在 JS 文件上，它只会被加载并导出到输出路径！

我的流程和 Webpack 配置非常复杂，很大并且分成不同的文件，但这是有趣的部分

这里是触发错误的css

如果使用 css 看起来很奇怪，to-string-loader那是因为angular2-template-loader允许将 CSS 直接内联到 Angular2 Componet 的stylesUrl

由于错误堆栈，似乎一旦 css-loader 完成工作，png 文件就没有被定义的加载器（url！image-webpack）加载，而是用 babel-register 加载？所以我console.log是 css-loader 的结果，并且有预期的图像require：

所以我让 babel 忽略 png 文件

这会引发一个稍微不同的错误，因为 babel 忽略了图像，但最终似乎是相同的：

我一无所知，我要去 WTF 只是在 CSS 文件上设置图像背景应该很容易

有什么想法吗？？

我正在尝试在节点 js 应用程序中使用反应。我发现的一种方法是使用 babel-register，它可以转换 react jsx 文件。

我将代码放在节点 index.js 中。

然后我把反应代码放在 public/index.js

然后我得到这个错误。未捕获的 SyntaxError：意外的令牌 <

我相信我安装了使用 babel-register 所需的一切......

我必须使用 webpack 而不是 babel-register 还是我做错了？

当在 Node 6.6 项目中需要该模块时，我有一个项目用于将babel-registerES6 源动态转换为 ES5。我已经阅读babel-register了 Noderequire函数的挂钩，以便在您尝试加载文件时对其进行转译，但我并不总是清楚哪些文件会受到该更改的影响。

当我编写测试时，这个问题经常出现：是只有我的生产代码被转译，还是测试代码也被转译？这让我想到了一个更普遍的问题，这是这篇文章的主题：

我如何知道 Babel 何时实际运行，以及哪些文件正在被转译？

示例代码

假设我有这样的生产类，它们是用 ES6 语法编写的

并且 Babel 被配置为这样转换 ( .babelrc)

然后是一些测试代码

所有这些都像这样在节点上运行

如果有帮助，可以在此处获得示例代码。

在开发中运行我的代码时使用 babel-register 或 babel-node 有什么区别？这两个选项是：

1. require('babel-register')({ "presets": ["es2015"] });在 entry-point.js 和 npm 启动脚本node entry-point.js

2. 只需有 npm 启动脚本babel-node entry-point.js --preset=es2015

他们做同样的事情吗？并且推荐一种方法而不是另一种方法？

我想测试一个具有角度（1.6）作为依赖项的 ng-redux 减速器。当我用 mocha 运行测试（npm test）时，我得到：

我尝试添加 jsdom 以提供假窗口。但是在导入角度时它仍然失败并出现此错误：

有没有办法让 Angular 在 mocha/babel 世界中正常工作？

我在这里提供了一个小型 github 项目，它重现了该问题。

这是项目的内容：

包.json

.babelrc

要测试的代码

考试

目前，我所有的 mocha 测试失败都与转译的行号/列号一起输出。有没有一种方便的方法可以使用我的源图获得摩卡咖啡？

这是我当前的测试入口点：

我相信这与Babel + Mocha 堆栈跟踪报告错误的行号不同，因为堆栈跟踪实际上包括它的转译步骤，如!transpiled所示，如果包含，retainLines 什么也不做：

我正在使用 webpack 1.12.14 并且不能将图像要求为全局常量，例如

它失败并显示 [错误：找不到模块 'icon.svg'] 代码：'MODULE_NOT_FOUND'}

从我的 webpack.config 中：

和装载机：

我的 babelOptions.js

我可以在函数或构造函数中要求，例如：

我有一个当前布局的项目：

因为我不想在我的导入中使用丑陋的相对路径，所以我paths为 Browserify 设置了属性。

所以在 中molecules/many-histograms/index.jsx，我能够：

它在开发中运行良好，但运行测试似乎正在为该导入而死。它说：Cannot find module 'atoms/histogram'

我当前对 mocha 的配置如下：

如何为 Mocha 或 Babel 设置正确的导入根目录？