如何导入/加载整个文件以包含在我的包中？

Question

如何将整个文件包含到我的包 main.js 中？

ES6 可以import/export 函数和类。但是，如果我想将另一个文件中的全部内容包含到我的包 main.js 中怎么办？怎么办？

我在 Stackoverflow 上遇到了一个查询：Managing jQuery plugin dependency in webpack。

不过，我不确定这个问题。那里给出的那些选项似乎针对注入隐式全局变量、配置它、禁用AMD、包括大型分布。我不认为这是我想要的。

假设我在 src 目录中有两个文件
1- rough.js

const rgh = "qwerty"

2- index.js

import './rough.js' //something like this
console.log (rgh)

现在我对 bundle.js 的期望是

const rgh = "query";
console.log(rgh)

我只想将我的一个文件中的所有内容全部传输到 index.js 以便 webpack 捆绑它们

Answer 1

那里给出的那些选项似乎针对注入隐式全局变量， 配置它，禁用 AMD，以包含大型 dist。我不认为 这就是我想要的。

要理解这一点，您需要了解 webpack 为您做了什么。 Webpack 获取一系列 Javascript 文件（更重要的是它们的内容）并将它们解析为一个文件。从文件的角度来看，这就是它所做的事情，但是如果您忽略该文件并从代码的角度考虑它的作用，它会获取每个导入的 objects 并使它们可用于其他对象取决于您在代码中定义的规则（使用import 和export）。你可以从闭包的角度来思考这个问题：

如果你有类似的代码：

import a from 'a.js';

export default b(){
    console.log(a.test());
}

这将变成类似的东西，在一个 js 文件中：

var a = (function() {
    var testStr = "test";
    function test(){
        return testStr;
    }
    return {test:test};
})();

var b = (function(a) {
    console.log(a.test());
})(a);

因此您可以看到 文件 并不是很重要。重要的是范围。 b 可以使用 a，因为它被注入到它的作用域中（在本例中作为 IIFE）。

在上面的示例中，a 和 b 在 全局范围 中，但 testStr 不在。

因此，当您谈论“导入我的文件”时，您需要忘记这一点，并考虑要如何导入该文件中的哪些对象。直接声明 var a = ....; 的任何“在该文件中”的变量都在全局范围内。所以听起来你想做的是import the objects in that file into the global scope。

Answer 2

你只需要在 main.js 中导入那个文件 像这样