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

Question

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

我有以下文件结构:

foo.js

var Foo = (function () {

    var someMethod = function () {};

    return {
        someMethod: someMethod
    };

})();

bar.js

(function(module) {

    module.bar = "bar";

})(Foo);

主要.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 而不是 bar.js 的 Foo？

编辑:

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

import Foo from "foo.js"

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

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

这是一个误解，但在对 stackoverflow 和互联网进行研究后，我没有找到任何关于如何解决这个棘手问题的方法。

所以...提前致谢!

Answer 1

Rollup 不会连接 JavaScript 文件；它将一组 ES2015 模块转换为功能等效的单个脚本。 ES2015 模块的功能不像大多数其他语言中的模块(当然不像 C/C++ #includes!)，and I recommend reading about them here.如果你想导入一个常规的 JavaScript 文件，你必须将它转换成一个 ES2015 模块，这在紧要关头可以使用 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$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";

主.js

import "./bar.js"

---

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

---

foo.js

export function someMethod () {}

bar.js

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

export const bar = "bar";

主.js

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

---

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