问题标签 [grunt-babel]

我是 Grunt 及其所有插件的新手，但我想学习和设置一些很棒的前端工具。话虽如此，我一直在通过Github关注Grunt 文档和一些与 Grunt 和 Babel 类似的问题，但我似乎不断得到以下回溯：

对这个新手的任何更清晰的解释将不胜感激。我是 JS 编程和设置 DevOps 的新手，因此鼓励使用一些有用的技巧和最佳实践。

设置：

js_practice/ (根项目)
|----package.json

所有发行版和包
|---node_modules/

服务器端（节点）支持
|---es6/
| ------ test.js
|---dist/

客户端（浏览器）支持
|----public/
|---es6/（在公共文件夹中）
| ----- test2.js
|---dist/（在公共文件夹中）

这是我当前的代码：

咕噜声文件.js

输入文件

输出文件，通过 grunt

输出文件，通过 CLI

.babelrc

define()当我通过 grunt-babel 插件进行转换时，我遇到了这种奇怪的行为，即在我的 ES5 源代码中添加了额外的内容。我已经分叉了 repo 并将 babel-core 和 babel-preset-es2015 更新到了最新版本，但这并没有帮助。

挖掘到 babel-grunt 看起来像是babel.transformFileSync用来进行转换。在 babel-cli 包中，它看起来像babel.tranform被使用。但babel.transformFileSync只是读取一个文件并将内容传递给babel.tranform.

我觉得我错过了一些小的配置选项或某处的东西。谁能看到我错过了什么？

我对 grunt/npm 很陌生，但是在阅读了文档之后。我已经让自己 apackage.json和 a Gruntfile.js。这是我的文件夹结构：

我有的

这是我的Gruntfile：

然后这是我的package.json：

它有什么作用？

我有我的src/文件夹，其中包含我的源文件（*.es6）。我想将这些转换为dist/带有 grunt 的目录。

我试过的

然后我安装了所有的依赖项/babel-cli/grunt-cli/等npm install。npm-update --save

看起来不错，所以我继续咕哝着跑：

ls正在输出与我运行之前完全相同的内容grunt。所以似乎什么都没有发生。我的输出在哪里dist？在过去的几个小时里，这一直困扰着我。我已经尝试安装babelify，以及来自互联网博客的许多其他修复程序，但唉，没有任何效果。

我正在尝试使用 grunt-babel 将我的 es6 编译为 es5。当我进入grunt babel命令行时，它挂起并且从不运行 babel。它不会返回错误或崩溃，它只是挂起。我的 Gruntfile.js 中有其他任务，它们运行得很好，所以 Gruntfile.js 的结构是正确的。

这是我的 Gruntfile：

这是我的 package.json：

.babelrc 看起来像这样：

从昨天开始，我一直在尝试解决这个问题，但是如果没有错误消息，很难知道问题出在哪里。我使用 babel 作为字符串，但我也尝试过不带引号，它的行为完全相同。我也尝试添加presets: ['babel-preset-es2015']到下面的选项，'babel'但它没有改变任何东西。

任何帮助将不胜感激，如果您需要更多信息或想查看其他文件，请告诉我。提前感谢所有帮助！

我使用 generator-angular-fullstack 创建了平均堆栈种子

但是当我尝试执行“grunt serve:dist”时，我收到了这个错误

我尝试使用 --force 选项运行它，然后我收到此错误

下面是我的 Gruntfile.js

这是我的 package.json

我有一组相互依赖的 Node.js 模块，我一直将它们构建为 ES6 模块，理想情况下，我希望能够将单个模块指定为入口点，并将这些（使用 grunt）构建到一个可以节点应用程序需要。

grunt-babel 似乎无法处理这种包装。

我知道 browserify 可以为浏览器执行此操作，并且我知道 browserify 可以包含 Node 模块，但我无法弄清楚如何让 browserify 将单个模块入口点转换为需要的 Node 模块。

因此，如果我的源文件（和入口点）src/hello.js是：

并且src/world.js是：

我希望它能够从普通的 Node 应用程序中使用它，例如：

我的 grunt 文件需要是什么样的？

您好我正在尝试将 js 代码转换为浏览器可以执行的东西。

实用程序/Logger.js

jet.js

描述

当我把它jet.js放在浏览器中时，它会出现以下错误：

Uncaught ReferenceError: require is not defined

我在这里读了一个问题，我决定使用browserify+babelify组合。当我在终端中引入下一个命令时，它显示了一个依赖错误。

我究竟做错了什么？我需要什么才能正确运行它？

贾斯特。

命令

输出

我有一个 ES6 项目。我想将文件转译成 ES5。我创建了一个 gulp 任务。这是我使用 babel 的任务：

当我运行我的任务时，我有一个错误：

问题发生在我的控制器中：

请问如何解决我的错误？

I am using grunt-babel to transform my react-jsx files into .js.

I am planning to write a grunt task for this. Currently, I have below

In my above task what I am trying to do is, I am transforming all my JSX files present in folder ./react_demo/test/jsx/common into ./react_demo/static/react/components.

Now, in my application in future we can have multiple folder each having there own-set of JSX files which will be going into different destination folders.

We can have folders like:

• /react_demo/test/jsx/common -> /react_demo/static/react/components
• /react/test/jsx/common1 -> /react/static/react/components1
• /react2/test/jsx/common2 -> /react2/static/react/components2

Now, how can I specify multiple src/destdirectories and map them together? I tried giving an array to src/dest but it complained with below error:

Warning: Path must be a string. Received [ './react_demo/cartridge/scripts/jsx/common' ] Use --force to continue.

我正在使用 grunt 来编译 react jsx 文件，通过使用 grunt-babel 和预设：[“env”，“react”]，插件：[“transform-es2015-modules-amd”]，它可以完美地工作

我遇到的问题是，grunt-babel 转译放在同一目录中的 JSX 文件，但我需要转译最高一级至根文件夹目录的 JSX 文件。以下是详细说明：

文件夹结构：

反应应用

咕噜文件：

上面的 grunt 配置对于放置在 App 文件夹下的 jsx 文件夹工作正常，问题是我需要转换放置在 App 文件夹之外的 JSX 文件夹。

将 grunt config cwd 更改为 cwd: './../JSX' , dest 为dest: './../JSX_generated' ,

出现以下错误：运行“babel:jsx”（babel）任务警告：“base”中指定的未知插件“transform-es2015-modules-amd”在 0，尝试相对于“../JSX”进行解析

示例 jsx 文件：

有没有办法从 grunt 或 node 安装上一层转换文件？