使用 system.import 加载 +main.js - Javascript

在前端开发中，我们经常需要异步加载一些 JavaScript 文件，这时就需要使用动态加载模块的方式。在 ES6 中，我们可以使用 import() 方法来实现动态加载。

但如果我们需要动态加载一个模块，并且模块中包含了许多其他子模块或依赖项，这时就不能够直接使用 import() 方法了。为此，有一种更加通用的方式——使用 system.import() 方法。

使用示例

system.import() 方法的语法与 import() 方法类似，也是返回一个 Promise 对象。下面是一个 system.import() 方法的示例：

system.import('./main.js')
  .then(module => {
    // 加载成功时执行的回调函数
    console.log(module);
  })
  .catch(error => {
    // 加载失败时执行的回调函数
    console.error(error);
  });

在上述示例中，我们使用 system.import() 方法加载了一个名为 main.js 的模块，如果模块加载成功，then() 方法中的回调函数就会被执行，而如果加载失败，则会调用 catch() 方法中的回调函数。

加载主模块

我们可以直接加载主模块，也就是那个包含了许多其他子模块或依赖项的模块。例如，我们可以加载名为 main.js 的主模块，并且该主模块中包含了其他的子模块：

// main.js

system.import('./module1.js')
  .then(module1 => {
    console.log(module1);
  })
  .catch(error1 => {
    console.error(error1);
  });

system.import('./module2.js')
  .then(module2 => {
    console.log(module2);
  })
  .catch(error2 => {
    console.error(error2);
  });

// 其他子模块...

然后我们可以使用 system.import() 方法加载这个主模块：

system.import('./main.js')
  .then(mainModule => {
    console.log(mainModule);
  })
  .catch(error => {
    console.error(error);
  });

当加载完成后，mainModule 就会包含所有的子模块或依赖项。我们可以在 mainModule 中访问子模块或依赖项的各种属性和方法。

注意事项

但需要注意的是，system.import() 方法并不属于 ES6 模块的一部分，而是属于 SystemJS 模块规范。因此，如果我们要使用 system.import() 方法，就需要先引入 SystemJS 模块：

<script src="system.js"></script>

另外，IE 浏览器不支持 system.js 模块，需要使用 system.polyfills.js 文件作为兼容性处理。因此，在使用 system.import() 方法时需要注意浏览器兼容性。