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 = (function () { // Here the problem

    var someMethod = function () {};

    return {
        someMethod: someMethod
    };

})();

(function(module) {

    module.bar = "bar";

})(Foo); // Ouupss !

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

编辑：

以防万一，在 main.js 中，我使用视图中的默认导入来覆盖默认名称：

import Foo from "foo.js"

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

Non-existent export 'default' is imported from foo.js by main.js

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

所以...提前致谢！

Answer 1

Rollup 不会连接 JavaScript 个文件；它将一组 ES2015 模块转换为功能等效的单个脚本。 ES2015 模块的功能不像大多数其他语言中的模块（当然不像 C/C++ #includes！），and I recommend reading about them here. If you want to import a regular JavaScript file, you'll have to convert it to an ES2015 module, which in a pinch can be done automatically using a Rollup plugin。例如，这是一个糟糕的通用解决方案，但您可以在 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，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

虽然 Permutators 的答案在大多数情况下仍然正确，但现在有一个名为 rollup-plugin-legacy 的插件。它允许您将一些任意的 JS 库包装到可与 rollup 一起使用的模块中。我不知道为什么它这么鲜为人知，因为我觉得它非常有用。

只需将其添加为插件即可：

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

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

import Foo from 'foo.js'

Rollup.js 如何在不做任何更改的情况下导入 js 文件（不是 es6 模块） (myvar$extrastring)

Rollup.js how import a js file (not es6 module) without any change (myvar$extrastring)

javascript

rollupjs

es6-modules

foo.js

bar.js

main.js

foo.js

bar.js

main.js