Question

我有一个模块m1需要初始化才能导入模块m2：

import * as m1 from 'm1';
m1.init(...)
import * as m2 from 'm2';

我更新了browserify并从6to5ify转换为babelify转换器。之后，我的捆绑中的require次呼叫被移到了顶部：

...
var _m1 = require('./m1');
var m1 = _interopRequireWildcard(_m1);
var _m2 = require('./m2');
var m2 = _interopRequireWildcard(_m2);
m1.init('init value');
...

为什么require来电被移到了顶部？调用m2后，我可以使用ES6模块导入语法导入m1.init吗？我可以直接使用require

import * as m1 from 'm1';
m1.init(...)
const m2 = require('m2');

我得到了

var _m1 = require('./m1');
var m1 = _interopRequireWildcard(_m1);
m1.init('init value');
var m2 = require('./m2');

但这对我来说似乎是个黑客。

Answer 1

在调用import后，我可以使用ES6模块m2语法导入m1.init吗？

无论Babel如何转换此代码，答案是：否。规范要求在评估模块本身之前评估所有依赖项（§15.2.1.16.5）。

这意味着当引擎实际执行代码时，不会评估import声明。对它们进行静态分析，并以某种方式将此信息添加到模块中，以便在评估模块本身之前评估依赖关系。

即使你发现了一个可以做你想做的事情的转换器，它也不符合规范，你的代码将来可能会破坏。

Answer 2

进口应被视为ES6中的悬挂值。它们始终位于模块的顶部。您目前依赖于隐式依赖项。如果m2依赖于m1不仅被加载，而且还被初始化，那么你应该有一个显式返回m1初始化版本的模块，那么它应该明确地依赖于它或者通过导入订购，如果您不能直接修改m2，例如

INIT-m1.js

import * as m1 from 'm1';
m1.init(...)
export default m1;

INIT-m2.js

import m1 from './init-m1';
import * as m2 from 'm2';

require之前被称为import语句

2 个答案:

INIT-m1.js

INIT-m2.js