Question

我试图弄清楚如何在带有mithril的webpack中使用动态导入。为了做到这一点，我认为我需要在整个过程中的某个地方使用异步函数。现在，这就是我使用异步功能的方式：

import m from 'mithril'

let App = async () => {
  let { Component } = await import('./components.js')
  return {
    view () {
      return m(Component)
    }
  }
}

App().then(app => m.mount(document.body, app))

理想情况下，我想这样使用它：

import m from 'mithril'

let App = {
    async view () {
      let { Component } = await import('./components.js')
      return m(Component)
    }
  }
}

m.mount(document.body, App)

文档中是否缺少我想要实现的功能？我试图查看每一个关于诺言的内容，但我可能错过了。

任何帮助将不胜感激。

Answer 1

一种可行的方法是：

async function main() {
    const myModule = await import('./myModule.js');

    const {export1, export2} = await import('./myModule.js');

    const [module1, module2, module3] =
        await Promise.all([
            import('./module1.js'),
            import('./module2.js'),
            import('./module3.js'),
        ]);
}
main();

(async () => {
    const myModule = await import('./myModule.js');
})();

有关更多信息，请单击下面的链接。

ES proposal: import() – dynamically importing ES modules

Answer 2

尝试以下操作，该操作提供了一个名为 DynamicComponent 的简单组件，该组件可在任何位置以及带有子组件的情况下使用：

App.js

import m from 'mithril'
import { DynamicComponent } from './DynamicComponent'

const App = {
    view() {
      return m( DynamicComponent, {
        component: 'OtherComponent'
      }, 'Hello world' ),
    }
  }
}

m.mount(document.body, App)

OtherComponent.js

import m from 'mithril'

export function OtherComponent() { return {
  view({ children }) { return m( 'div', children )}
}}

DynamicComponent.js

import { hooks } from '/hooks'

export function DynamicComponent() { return {
  ...hooks,
  attrs: null,
  component: null,

  view({ children }) { return (
    // Await module resolution and process attributes.
    // Use '&&' as a shortcut to only continue 
    // once 'this.component' isn't null.
    // Pass a clone of attrs to the loaded component. 
    this.component && m( this.component.default, this.attrs, children )
  )}
}}

hooks.js

async function oninit({ attrs }) {
  // Preload -> Load immediately, in parallel
  // Prefetch -> Load when browser is idle (Can be less responsive)
  // See more: https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules
  // Dynamically import component and append '.js' (Don't include '.js' in your imports).
  if ( attrs.loadType = 'prefetch' ) {
    // Lazy load
    this.component = await import( /* webpackPrefetch: true */ `
      ${ attrs.component }.js`
    )
  } else {
    // Immediate load
    this.component = await import( /* webpackPreload: true */ `
      ${ attrs.component }.js`
    )
  }

  /*
    Process and pass along attributes
    This clones the attributes to prevent any changes from affecting
    the original attributes.

    You can save memory if it becomes a problem by directly
    assigning `v.attrs` to `newAttrs`, but you lose this immutability.
  */
  const newAttrs = { ...v.attrs }

  // Remove attributes used in `DynamicComponent`
  delete newAttrs.component
  delete newAttrs.loadType

  // Assign to component
  this.attrs = newAttrs

  m.redraw()
}


export const hooks = {
  oninit,
}

Mithril.js中对Webpack动态导入的异步功能支持？

2 个答案: