JavaScript ES^ 导入顺序答案

【问题标题】：JavaScript ES^ import orderJavaScript ES^ 导入顺序
【发布时间】：2017-06-21 18:24:42
【问题描述】：

我有一个 main.js 文件，我在其中导入所有其他 js 文件，但问题是导入文件中的脚本没有按照导入的顺序执行。

我的 main.js 看起来像这样：

     import * as libs from './libs.js';
     import * as utils from './utils.js';
     import * as slider from './slider.js';

但是在main.js中，编译后slider脚本在utils之前运行，所以在slider.js中没有utils

有没有办法设置导入文件的顺序？

我的文件内容是：

Utils.js：

         let Utils = Utils || {};

         (function($, window, document, app, undefined) {
         'use strict';

         app.isRwdSize = (size) => {
            return size.css('opacity') === 1;
          }

         })(jQuery, window, document, Utils);

slider.js：

          import * as utils from './utils.js';
           let Utils= Utils|| {};

           (function($, window, document, app, undefined) {
               'use strict';

                console.log(app); - shows empty object
           })(jQuery, window, document, Utils);

main.js：

       import * as libs from './libs.js';
       //import * as utils from './utils.js'; - tried here and in slider.js
       import * as slider from './slider.js';

提前感谢您的帮助拉夫

【问题讨论】：

libs 是否可能以某种方式导入 slider？
No libs.js 只是滑块库，slider.js 正在初始化滑块。其实main.js中编译后导入的顺序是：slider.js、libs.js、utils.js
如果slider.js依赖于utils.js那么slider.js需要导入utils.js
好的。所以没有办法以特定顺序将所有文件导入一个主文件？因为 utils.js 是我将在所有其他文件中使用的通用函数。所以我必须在每个文件中导入 utils.js 以确保它始终可用？
您可以根据需要将它们导入您的main.js，但您在此处获得的导入变量只能在您将它们导入的文件中访问。您无法从其他文件访问它们。

标签： javascript ecmascript-6

【解决方案1】：

你的

let Utils = Utils || {};

行在模块化的 JS 世界中没有意义。 Utils 应该是已导入的模块。同样，(function($, window, document, app, undefined) { 作为包装器也不是您通常在模块中看到的东西。我希望您的文件符合

utils.js：

export const isRwdSize = (size) => {
  return size.css('opacity') === 1;
};

slider.js：

import * as Utils from './utils.js';

console.log(Utils);

main.js：

import * as libs from './libs.js';
import * as slider from './slider.js';

【讨论】：

谢谢，这对我帮助很大，但是还有一种方法可以定义在 main.js 中导入的文件的执行顺序吗？
导入将按照它们导入的顺序运行，但通常这并不重要，除非您依赖具有全局副作用的模块，而这通常是您不希望的。