Rollup.js如何导入一个js文件(不是es6模块)没有任何改变(myvar$extrastring)

Question

首先，我理解为什么rollup.js需要在某些变量的末尾附加额外的字符串以避免冲突，但是…我不明白如何"concat/import"一个简单的javascript文件谁不是amd/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"

构建后，我得到:

build.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 for bar.js ?

编辑:

如果，在main.js中，我使用默认的import在视图中覆盖默认的名称:

import Foo from "foo.js"

我得到了这样的错误(正常!):

不存在的导出'default'是由main.js从foo.js导入的

这是一个误解，但是在研究了stackoverflow和互联网之后，我没有找到关于如何解决这个棘手问题的任何信息。

所以…

Answer 1

Rollup不连接JavaScript文件;它将一组ES2015模块编译成一个功能相同的脚本。ES2015模块的功能不像大多数其他语言中的模块(当然不像C/c++ #include !)，我推荐在这里阅读它们。如果你想导入一个普通的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中不存在。当您尝试访问bar.js中名为Foo的变量时，它会将其作为全局变量查找，就好像您没有在任何文件中声明它一样。通过将foo.js的Foo重命名为Foo$1, Rollup通过防止foo.js的本地Foo遮蔽全局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不能确定第一个，因为它对其数据做了复杂的事情，而不仅仅是使用导出。

Answer 2

虽然permutator的答案在很大程度上仍然是正确的，但现在有一个名为rollup-plugin-legacy的插件。它允许您将一些任意的JS库包装到一个可以使用rollup的模块中。我不知道为什么它这么少人知道，因为我发现它非常有用。

将其作为插件添加:

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

并将main.js中的import语句更改为:

import Foo from 'foo.js'