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

Question

首先,我理解为什么rollup.js需要在某个变量的末尾添加额外的字符串以避免碰撞但是...我不明白如何"连接/导入"一个简单的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？对于bar.js,还是Foo $ 1而不是Foo？

编辑:

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

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在foo.js中声明变量时,bar.js中不存在该变量.当您尝试访问Foobar.js中调用的变量时,它会将其查找为全局变量,就好像您没有在任何文件中声明它一样.通过将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无法确定第一个,因为它使用数据而不是仅仅使用导出来复杂化.