js模块导入排序和执行问题答案

【问题标题】：js module import ordering and execute problemjs模块导入排序和执行问题
【发布时间】：2021-08-03 09:35:34
【问题描述】：

我正在使用 Vue，最近遇到了一个问题。

如果我有两个文件，fileA 和 fileB 在fileB中我写console.log('file B test')

当我这样做时

console.log('file A test') 
import B from '@/app/fileB'

-> the devTool shows file B's console.log first

那么这里可能有什么问题？进口订货？它保证从上到下导入和执行吗？如果有人知道有关导入或执行订购的任何信息，请先感谢！

【问题讨论】：

【解决方案1】：

Import 语句总是被提升到模块的最顶部。一个包含

的模块

// some non-import code
import foo from 'foo';
// some more non-import code 2
import bar from 'bar';
// some more non-import code 3

将像所有导入都在最顶部一样运行：

import foo from 'foo';
import bar from 'bar';

// some non-import code
// some more non-import code 2
// some more non-import code 3

对于听起来你想做的事情，你可以让 B 有一个 init 方法或你调用的东西来让它做它的事情：

import B from '@/app/fileB'
console.log('file A test')
B.init();

我更喜欢的另一个选项是始终导入和导出函数 - 你可以有一个 makeB 模块而不是 B，然后在 A 中调用它：

// b
export const makeB = () => {
  const b = {};
  console.log('creating B now');
  // other stuff
  return b;
};

// a
import { makeB } from './makeB';
console.log('file A test');
const b = makeB();
// do stuff with b

【讨论】：

嗨@CertainPerformance，感谢您的回复。所以你说“导入语句总是被提升到最顶端”如果我有多个导入文件，并且每个文件内部也有多个导入怎么办？是不是所有的进口都先吊到顶了？因为现在我正在维护一个项目并面临一些排序问题并试图弄清楚，但代码执行排序与我的想法不同。 :(
是的，所有文件的所有导入都将被提升到顶部 - 每个文件都将在任何 JavaScript 真正运行之前加载。对于这个问题，我选择的解决方案是始终导出函数，并避免对顶层模块产生副作用。 stackoverflow.com/a/52827581 stackoverflow.com/a/59998121 stackoverflow.com/a/63529657