[英]How to import/load entire file to include in my bundle?
How to include an entire file into my bundle main.js?如何将整个文件包含到我的包 main.js 中?
ES6 can import
/ export
functions and classes. ES6 可以
import
/ export
函数和类。 But what if i want to include the whole content from another file into my bundle main.js?但是如果我想将另一个文件中的全部内容包含到我的包 main.js 中怎么办? how to do it?
怎么做?
I came across the query on Stackoverflow: Managing jQuery plugin dependency in webpack .我在 Stackoverflow 上遇到了查询: Managing jQuery plugin dependency in webpack 。
I'm not sure about this question though.我不确定这个问题。 Those options given there seem to target injecting implicit globals , configuring this , disabling AMD , to include large dists .
那里给出的这些选项似乎针对注入隐式全局变量,配置它,禁用 AMD ,以包括大型 dist 。 I don't think this is what i want.
我不认为这是我想要的。
Let's say i have two files in src directory假设我在 src 目录中有两个文件
1- rough.js 1- rough.js
const rgh = "qwerty"
2- index.js 2- index.js
import './rough.js' //something like this
console.log (rgh)
Now what i expect in bundle.js is现在我在 bundle.js 中期望的是
const rgh = "query";
console.log(rgh)
I just want all the content inside one of my file to get all transported to index.js for webpack to bundle them我只希望我的一个文件中的所有内容都传输到 index.js 以便 webpack 将它们捆绑
Those options given there seem to target injecting implicit globals, configuring this, disabling AMD, to include large dists.
那里给出的这些选项似乎针对注入隐式全局变量,配置它,禁用 AMD,以包括大型 dist。 I don't think this is what i want.
我不认为这是我想要的。
To understand this you need to understand what webpack is doing for you.要理解这一点,您需要了解 webpack 为您做什么。 Web pack takes a series of Javascript files (and more importantly their contents) and parses these into one file.
Webpack 接受一系列 Javascript 文件(更重要的是它们的内容)并将它们解析为一个文件。 That's what it does from a file point of view, but if you ignore the file and think about what it does from a code point of view, it takes each one of the imported objects and makes them available to other objects depending upon the rules you define in your code (using
import
and export
).从文件的角度来看它就是这样做的,但是如果您忽略该文件并从代码的角度考虑它的作用,它会根据您的规则获取每个导入的对象并使其可用于其他对象在您的代码中定义(使用
import
和export
)。 You can think of this from a closure point of view something like this:你可以从闭包的角度来思考这个:
if you have some code like:如果您有一些代码,例如:
import a from 'a.js';
export default b(){
console.log(a.test());
}
This will be turned into something like, in one js file:这将变成类似的东西,在一个 js 文件中:
var a = (function() { var testStr = "test"; function test(){ return testStr; } return {test:test}; })(); var b = (function(a) { console.log(a.test()); })(a);
So you can see that the file isn't really important.所以你可以看到文件并不重要。 What's important is the scope.
重要的是范围。
b
can use a
because it is injected into it's scope (In this instance as a IIFE). b
可以使用a
因为它被注入到它的作用域中(在这个例子中作为一个 IIFE)。
In the above example a
and b
are in the global scope but testStr
isn't.在上面的例子中
a
和b
在全局范围内,但testStr
不在。
So when your talking about "importing my file", you need to forget about that and think about what objects in that file you want to import how.因此,当您谈论“导入我的文件”时,您需要忘记这一点并考虑要如何导入该文件中的哪些对象。 Any variables "in that file" declared directly
var a = ....;
“该文件中”的任何变量直接声明
var a = ....;
are in the global scope.都在全局范围内。 So it sounds like what you want to do is import the objects in that file into the global scope .
所以听起来你想要做的是将该文件中的对象导入全局范围。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.