问题标签 [rollupjs]

I am using rollup.js to transpile the module dependencies from a file 'main.js'

Is there a watch option to rerun the transpilation when a source file changes

我目前正在创建一个导出单个 ES6 模块的 bower 包。

在为我的包构建 dist 时，我使用汇总将所有内部模块移动到一个模块中，只导出一个模块。

吞咽任务：

这一切都很好，但我正在从其他我不想与我的模块捆绑的 Bower 包中导入一些依赖项（jQuery，font-awesome）。

我的问题是：如何继续捆绑我的代码并保留 Bower 包的 ES6 导入语句 - 但不将外部代码汇总到我的包中？

例子：

我最近开始玩 rollupjs。根据可用文档配置所有内容并将其捆绑后，我从外部库中收到许多关于未定义对象的错误。这种错误：Cannot read property 'parse' of undefined来自crypto-js。它抱怨代码中的这一行：var ciphertext = Base64.parse(openSSLStr). 所以Base64是未定义的。我从捆绑的不同外部库中几乎没有这样的错误。

我使用了一些外部依赖项：chart.js、crypto-js、mithril、moment、pluralize

所有这些都与jspm. 我决定尝试汇总以加快速度，因为目前 jspm 太慢了。现在我一半的外部依赖项停止工作了。我只收到来自外部库的“未定义的东西”和“......不是函数”类型的错误。

可能是什么原因造成的？

这是我的 rollup.config.js

让我知道是否需要任何其他细节。

谢谢。

编辑

我已经完成了一个简单的测试 - 复制捆绑那些在我的应用程序中生成错误的库。

包.json

rollup.config.js

main.js

应用程序.js

运行上述将产生错误。

我已经使用 GitHub 的 Electron 构建了一个应用程序。我正在使用推荐的加载模块的方式，ES6 语法：

import os from 'os'

下载样板后，该应用程序运行正常。我已经能够background.js毫无问题地在文件中导入脚本。以下是我加载自定义模块的方式：

import { loadDb } from './assets/scripts/database.js';

clipboard.html但是，当我在 Electron 中clipboard.js打开一个新的浏览import器窗口（在这一点上，我收到一个Unexpected token import错误。

我的clipboard.html：

我的clipboard.js文件：

只是为了重新迭代，在app.html我的应用程序的主窗口中使用了相同的代码，这不会出错。

感觉就像主窗口正在初始化我的clipboard.html窗口没有的东西（也许是“汇总”？），但我的应用程序代码中没有明确的建议。

我是rollup第一次使用，它产生了一些意想不到的结果。下面是我的示例中的三个文件以及rollup我正在寻找的输出和输出类型。

这是我的完整示例的回购。

我有三个文件01.js, 02.js, 03.js.

01.js

02.js

03.js

这就是rollup回归。（实际的）

这就是我希望汇总返回的内容。（预期的）

我的印象是，rollup 会摆脱项目中不需要的所有依赖项。但是，您可以看到实际输出还包括一个不需要的依赖项lodash，并且还缺少另一个内部函数stupidReference。

我很好奇为什么这不像我预期的那样工作。我也很好奇我rollup是否正确使用了该工具。如果这不是预期用途，我真的很想找到一个能够实现我正在寻找的功能的工具。我想提供一个函数（或01.js上面的文件），并且只有运行该函数所需的代码。

更新 1

不确定我的代码发生了什么，但汇总站点上的编辑器能够拉入另一个文件并跟随树向下。这是我所拥有的链接。

更新 2

我意识到我可能错误地配置了 babel，我安装了下面的模块以及添加了.babelrc和rollup.config.js.

rollup.config.js

.babelrc

通过此更新，仍会产生相同的输出。

将ractive和ractive-load导入到我的汇总项目的正确方法是什么？npm 还是 github？

目前我正在使用npm安装每个：

和

我正在使用rollup-plugin-commonjswithrollup-plugin-node-resolve来正确地捆绑它们（问题末尾的rollup.config.js）：

但似乎 ractive-load 还在其代码中导入了其他模块，导致此错误：

Error parsing /home/.../node_modules/rcu/src/make.js: 'import' and 'export' may only appear at the top level (2:0) in /home/.../node_modules/rcu/src/make.js

我怎样才能正确使用 Rollup，哪些是这种情况下的正确来源（npm 或 github）？

这是我的rollup.config.js：

假设我在使用最新版本（在撰写本文时为 2.4.3）/vendor构建的 EmberJS 项目中的目录下有一个 ES6 库“foo”。ember-cli假设 foo 是一个包含多个文件的库，例如bar.js,baz.js等，它们都导出了一些东西。

我想将vendor/foo/bar.js,vendor/foo/baz.js等打包成一个分发文件，例如vendor/foo/dist/foo-bundle.js，我可以使用以下命令导入 Ember：

这看起来应该可以使用捆绑器和/或转译器（如Babel），但我不清楚我应该使用哪些工具以及以何种组合方式使用。Ember 是否有内置工具可以通过 ember-cli 执行我想要的操作（如果有，我一定是盲人）？我应该使用像webpack、browserify或rollup这样的外部捆绑器吗？

一般来说，围绕 JavaScript 工具似乎有很多噪音，这让我很难理解我有哪些选择来解决这个问题以及如何正确利用它们。任何帮助将不胜感激。

一些可能有用的注释...

到目前为止，我已经尝试了一些事情：

我试过只导入main.js文件，希望 EmberJS 也能遍历依赖树并导入import语句中引用的任何其他文件。这仅导入了main.js文件，没有其他依赖项。

我查看了broccoli-es6modules并在运行它时遇到了错误，但它也使用了esperanto，它已被弃用以支持汇总。

我也尝试过直接使用汇总，取得了一定程度的成功，但通常我的bundle.js输出是空的，并且不包含来自的代码，bar.js或者baz.js因为我只在入口点（例如main.js）中导入了它们：

我发现我是否main.js包含一个调用代码的函数，bar或者baz我得到的不仅仅是一个空包，但如果 foo 只是来自第三方供应商的脚本集合，没有“应用程序入口点”，除了数量对于清单文件之类的东西，汇总似乎是我正在寻找的错误选择。

再次感谢！

我有一个 Node.js 应用程序，其中所有模块都是用 CommonJS 编写的，还有一些使用 es6 功能，例如生成器、let、const 等。这一切都可以正常工作。

我想将所有这些文件捆绑到一个文件中，然后对其进行 uglify。我对必要步骤的最佳猜测是：1）将所有模块转换为 es6 模块 - 使用 Babel 2）使用汇总创建包并将其输出为 CJS 文件。3) 丑化这个 CJS 文件。

我玩过 rollup 和 babel 并阅读过诸如https://duske.me/easy-es2015-compilation-with-rollup-js-and-gulp-js/之类的文章，如果输入模块已经是 es6模块。而且我查看了https://github.com/rollup/rollup-plugin-babel，但由于我对 babel、rollup 等方面没有太多经验，因此陷入困境。

我正在试验 d3 v4.0 的 alpha，并尝试在 jspm 设置中创建自定义构建。我似乎无法理解新的模块化构建是如何工作的。

如果我想从一个模块导入一个命名的导出，即来自 d3-request 的 json，我可以执行以下操作： import {json} from "d3-request";在通过 jspm/npm 安装模块之后。

如果我想安装整个库，同样import d3 from "d3";

如果我想安装多个模块和命名导出，并在 d3 命名空间下让它们全部可用（即，在 d3-request 旁边导入 d3-shape，并在同一个 d3 全局中访问 d3.json 和 d3.line） ，这个的正确语法是什么？

我意识到，当使用这些模块的独立版本时，全局变量（例如d3_shape导出）。这是为了在将这些模块与我的应用程序捆绑在一起时为每个模块提供单独的命名空间吗？

我有 main.js 文件，它导入 ES6 模块，反过来，它也依赖于其他模块。我使用 rollup.js 将所有模块捆绑到单个文件中。

如何获取我的 main.js 所依赖的所有文件的列表？

我想在 gulp.watch 中使用这个列表来自动运行汇总任务，并在每次更改任何模块时更新捆绑包。我知道我可以观看整个 /js 目录，但是有没有更具体的方法？