英文:
How does "import * as bootstrap from '../node_modules/bootstrap' work?
问题
在我的 app.js 文件的顶部附近，我有以下代码行：
import * as bootstrap from '../../node_modules/bootstrap';
如果我在下一行使用 console.log(bootstrap)，我可以看到 bootstrap 变量确实包含一个看起来像 Bootstrap 的对象，具有我所期望的所有属性。
问题是，这是如何工作的，因为 node_modules\bootstrap 只是一个目录：
|- node_modules
|- bootstrap
|- dist [目录]
|- js [目录]
|- scss [目录]
|- LICENCE [txt 文件]
|- package.json
|- README.md
那么它究竟如何确定需要导入到 bootstrap 变量中的内容呢？
这更多是出于对其工作原理的好奇，因为它确实可以正确工作。
编辑：（目录结构已在原始帖子中进行了编辑）
英文:
Near the top of my app.js file, I have the line
import * as bootstrap from '../../node_modules/bootstrap';
If I console.log(bootstrap) on the next line, then I can see that the bootstrap variable does indeed hold a bootstrap-looking object with all the properties I'd expect.
The question is though, how does this work, because node_modules\bootstrap is just a directory
|- node_modules
|-> bootstrap
|-> dist [dir]
|-> js [dir]
|-> scss [dir]
|-> LICENCE [txt file]
|-> package.json
|-> README.md
So how exactly does it work out what needs to be imported into the bootstrap variable?
It's more curiosity as to how this works really, because it does work correctly.
EDIT: (directory structure was edited since original post)
答案1
得分: 1
如何 import 寻找特定文件取决于环境。但如果您使用Node或类似webpack、rollup或vite这样的常见捆绑工具，那么它们会使用您import/require的模块中的package.json文件来确定哪个文件是入口点。
以bootstrap为例，在package.json中包含以下行：
"main": "dist/js/bootstrap.js",
"module": "dist/js/bootstrap.esm.js",
（这些行可能会有所不同，我已经从GitHub上取得了这些信息）
这意味着如果使用require('bootstrap')，它将加载main中列出的文件，如果使用import * as bootstrap from 'bootstrap'，则将加载module中列出的文件。在这些文件中，您可以查看导出了什么内容。
甚至可能会有更多的条目，例如区分node和browser，并可能具有附加的别名。
英文:
How import looks for a particular file depends on the environment. But if you use node or a common bundler like webpack, rollup, or vite, then those use the package.json file in the module that you import/require to figure out which file is the entry point.
In the case of bootstrap, you have the following lines in package.json
"main": "dist/js/bootstrap.js",
"module": "dist/js/bootstrap.esm.js",
(These lines might vary, I have taken those from GitHub)
This means that it will load the file listed at main in case require('boostrap') is used or at module if you do import * as bootstrap from 'boostrap'. In those files, you could see what is exported.
There could even be more entires that e.g. differentiate between node and browser and could have additional aliases.
答案2
得分: -1
import * as bootstrap ... 将所有导出的模块放入 bootstrap 对象中。
如果你打开 ./node_modules/bootstrap/dist/js/bootstrap.js，你会发现 export {some_func, some_func_2}，它导出了预期的对象和函数。
英文:
import * as bootstrap ... is taking all the exported modules and putting them in bootstrap object
If you open ./node_modules/bootstrap/dist/js/bootstrap.js, you'd find the export {some_func, some_func_2} which is exporting the intended objects and function.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论