5

首先，我理解为什么 rollup.js 需要在某些变量的末尾附加额外的字符串以避免冲突但是......我不明白如何“连接/导入”一个不是 amd/ 的简单 javascript 文件commonjs/es6，但简单的显示模块！

我有以下文件结构：

foo.js

var Foo = (function () {

    var someMethod = function () {};

    return {
        someMethod: someMethod
    };

})();

bar.js

(function(module) {

    module.bar = "bar";

})(Foo);

main.js

import "foo.js"
import "bar.js"

构建后，我得到：

构建.js

var Foo$1 = (function () { // Here the problem

    var someMethod = function () {};

    return {
        someMethod: someMethod
    };

})();

(function(module) {

    module.bar = "bar";

})(Foo); // Ouupss !

那么我怎样才能得到 Foo 而不是 Foo$1 呢？或者 Foo$1 而不是 Foo 的 bar.js ？

编辑：

如果在 main.js 中，我在视图中使用默认导入来覆盖默认名称：

import Foo from "foo.js"

我收到这样的错误（正常！）：

不存在的导出“默认”由 main.js 从 foo.js 导入

这是一个误解，但是在对 stackoverflow 和互联网进行研究之后，我没有发现如何解决这个棘手的问题。

所以...提前谢谢！

4

2 回答 2

6

Rollup 不会连接 JavaScript 文件；它将一组 ES2015 模块转换为功能等效的单个脚本。ES2015 模块的功能不像大多数其他语言的模块（当然不像 C/C++ #includes！），我建议在这里阅读它们。如果要导入常规 JavaScript 文件，则必须将其转换为 ES2015 模块，在紧要关头可以使用Rollup 插件自动完成。例如，这是一个糟糕的通用解决方案，但您可以在 rollup.config.js 中添加类似的内容：

import replace from 'rollup-plugin-replace';

export default {
  entry: './src/main.js',
  dest: './dist/bundle.js',
  plugins: [
    replace({
      include: './src/main.js',
      values: {
        'var Foo =': 'export default'
      }
    })
  ]
};

也许应该有一个插件来自动导出东西，但似乎没有。

ES2015 模块不共享范围。因此，当您在 foo.js 中声明一个变量Foo时，该变量在 bar.js 中不存在。当您尝试访问Foobar.js 中调用的变量时，它会将其查找为全局变量，就好像您没有在任何文件中声明它一样。通过将 foo.js 重命名Foo为Foo$1，Rollup 通过防止 foo.js 的 localFoo遮蔽 global来确保正确的行为Foo。

为了在模块之间共享数据，您需要导出事物。这是重写示例的一种方法：

foo.js

export default (function () {

    var someMethod = function () {};

    return {
        someMethod: someMethod
    };

})();

bar.js

import module from './foo.js';

module.bar = "bar";

main.js

import "./bar.js"

但是该代码并没有很好地利用模块。你更有可能写这样的东西：

foo.js

export function someMethod () {}

bar.js

export { someMethod } from './foo.js';

export const bar = "bar";

main.js

import * as Bar from "./bar.js";

因为 Rollup 可以更多地推断代码在通过导入和导出共享时的使用方式，所以它可以更明智地决定哪些代码必须保留，哪些可以在输出中丢弃而不影响功能。对于第二个示例，它根本不输出任何代码这一事实证明了这一点。两者实际上都没有做任何事情，但是 Rollup 不能确定第一个，因为它使用数据而不是仅使用导出来做复杂的事情。

于 2016-12-07T21:41:33.213 回答
3

虽然 Permutators 的答案在很大程度上仍然是正确的，但现在有一个名为rollup-plugin-legacy 的插件。它允许您将一些任意 JS 库包装到可用于汇总的模块中。我不知道为什么它鲜为人知，因为我觉得它超级有用。

只需将其添加为插件：

legacy({
      "foo.js": "Foo"
})

并将 main.js 中的导入语句更改为：

import Foo from 'foo.js'
于 2017-07-15T09:45:53.820 回答