Javascript 在导入之前，不会执行根文件中上述导入语句的console.log（）

考虑执行以下操作的React应用程序中的root index.js文件：

console.log("INDEX.JS")
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
//Internal Dependencies
import Auth from './containers/Auth';
import store from './store/store';
import ErrorBoundary from './containers/ErrorBoundary';
//Highcharts config
import highchartsConfig from './globalChartConfig';
//Global styles
import './index.css';

highchartsConfig();

render(
  <Router>
    <Provider store={store}>
      <ErrorBoundary>
        <Auth />
      </ErrorBoundary>
    </Provider>
  </Router>,
  document.getElementById('root')
);

---

您必须在顶部定义所有

import

语句的范围。此限制允许

webpack

（不仅是webpack，实际上是任何模块加载器）静态分析模块导入的模块，并在执行其主体之前加载它们

console.log('first import then log')
import { foo } from 'foo'

将代码置于导入上方会抛出一个

eslint

警告（导入/首先）

为什么inside

index.js

console.log

在导入后激发

auth.js

是否按预期顺序执行

调用

index.js

（将呈现整个应用程序的入口点）时，webpack将捆绑每个模块，包括

App

和

Auth

所需的模块，然后调用

console.log

。当您访问

Auth.js

时，所有模块都已绑定，因此只需调用

console.log

---

那么为什么在AUTH.js中，我的import语句在其import语句的最顶端会在预期的时间执行？您能用AUTH.js的相关代码更新这个问题吗？不，正如您在上面看到的。Index.js呈现Auth。Auth（根据传递的条件）按顺序呈现应用程序的其余部分。正在更新回答您是否使用TypeScript或ECMAScript导入？未使用TypeScript。我使用的是ECMAScript Imports真正的问题是，它为什么重要？如果您的代码依赖于执行

console.log

，则会遇到更大的问题；）。对于订单，

import

是同步的；看不，我只是好奇，它没有引起任何问题。

console.log('first import then log')
import { foo } from 'foo'