在node中,为了确定我是否在入口文件中,可以直接使用node直接引用的文件__file__ === process.argv[1]
。process.argv
是一个包含我用来调用node
脚本的参数的数组。因此,第一个argv
通常是node
,第二个是我正在使用的文件。如果我正在创建一个库并且想知道是否直接调用该库(例如进行测试),这将非常有用。这通常会在生产版本中减少。
如何在浏览器中执行相同的操作?在ES6模块之前,所有JavaScript文件实际上都是全局的,这意味着<script>
标记全部由HTML直接调用。但是,现在,使用ES6模块,可以导入另一个JavaScript文件。如何确定我是否在浏览器直接提供的文件中<script src="..."></script>
,或者是否在另一个脚本导入的文件中?
这对于反应组件可能很有用,尤其是在库中。如果我位于“ entry”文件中,则可以render
选择一个标签<main>
。如果没有,我可以假设我正在被另一个组件导入,该组件可能会渲染自己或以其他方式渲染。相同的概念适用于其他基于组件的库,例如angular 2 +,aurelia等。例如,
import React from 'react';
import {render} from 'react-dom';
if(isEntryPoint()) {
const main = document.querySelector('main');
render(<App />, main);
}
function App() {
return <div>Hello World!<div>;
}
那么,如何确定浏览器是否直接通过引用了文件<script src="..."></script>
,或者该文件是由另一个JavaScript文件导入的呢?该isEntryPoint
函数应如何显示?
我认为浏览器托管的模块没有任何合理的方法可以知道它是直接加载的,而不是由另一个模块加载的。在联合国我能想到这样做合理的方法是,将URL的最后一段比较import.meta.url
与script
元素存在于DOM,如果一个比赛有看头。
我不推荐。
实际上,即使这样,如果我出于某种原因
<script type="module" src="./myfile.js"></script>
<script type="module" src="./your-library.js"></script>
并myfile.js
执行:
import /* stuff */ from "./your-library.js";
这会使您的库认为实际上是通过加载时直接加载的myfile.js
。
所以我真的不推荐它。;-)
相反,您最好向库(your-library.js
)提供设置调用,该调用可以使用该代码可以使用的代码,而可选的附加模块(auto-your-library.js
或其他任何可以使A)加载您的库,而B)进行安装调用。(如果您想完全提供自动设置功能。)
注意:import.meta
ES2020中的新增功能。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句