标签: dynamic-import

我正在尝试在 Python 中动态导入模块。现在，我有一个名为“modules”的目录，里面有两个文件；它们是 mod1.py 和 mod2.py。它们是返回时间的简单测试函数（即mod1.what_time('now')返回当前时间）。

从我的主应用程序，我可以导入如下：

sys.path.append('/Users/dxg/import_test/modules')
import mod1

然后执行：

mod1.what_time('now') 

它有效。

我并不总是会知道目录中有哪些模块可用。我想import如下：

tree = []
tree = os.listdir('modules')

sys.path.append('/Users/dxg/import_test/modules')

for i in tree:
  import i

但是我收到错误：

sys.path.append('/Users/dxg/import_test/modules')
import mod1

我错过了什么？

当你使用这样的东西时，捆绑是如何发生的：
const module = import(`folder1/${someExpression}`);
我的意思是，当你向它传递一个普通字符串时，我确实理解，但是 webpack 如何理解所有可能的结果？
这是一个好的模式吗？
它是否捆绑了该文件夹中的所有文件？
如果是这样，它将它们全部捆绑在一起并递归执行？

所以我一直在努力如何测试动态导入，在这种情况下，特别是在开玩笑，我在互联网上阅读了很多，但没有找到任何具体的东西，所以我考虑提出这个问题以集中一个体面的解决方案.

我在一个类中有以下方法

class MyClass {
   successMethod() {  ...  }

   errorMethod() { ... }

    myMethod() {
        return import('./myFile.js')
           .then(() => this.successMethod())
           .catch(() => this.errorMethod());
    }
}

我的问题是：

您如何使用 Jest 模拟此动态导入的 Success 和 Failing 承诺案例，以确保分别在解决或失败时调用每个方法（successMethod和errorMethod）？

我找到jest.doMock了模拟已解决案例的帮助，但没有找到通过模拟来使动态导入失败的方法，以便catch发现案例。

注意：这不是一个 React 应用程序，这是一个 Vanilla JS 项目。

我正在使用动态导入来加载用户在浏览器中编写的脚本.我首先将脚本内容放入blob中,然后使用dynamic import()将脚本作为模块加载.随着时间的推移,我希望这些脚本能够被更改并被销毁,从而使相应的模块被垃圾收集.但是,基于Chrome中的内存分析,这种情况并未发生.

之所以似乎与某种东西有关ModuleMap.这是我在所有脚本不再使用后拍摄的内存快照的截图.

如您所见,Window对象正在为这些模块提供保留路径.只要是这种情况,我肯定最终会耗尽内存,因为每次用户编辑脚本时都会创建这些模块.

我想知道如果有一种方式来获得浏览器(以及其他浏览器),以卸载这些模块,一旦他们不再使用.

大家好，我一直在尝试动态导入来为使用 CRA (create-react-app) 创建的应用程序渲染我的组件，虽然它在某些情况下运行良好，但对于某些情况，它返回一个无法加载模块错误，例如我加载了一个组件（放置在 src 下的目录中）在我的动态中index.js工作正常，但是当我尝试在其中渲染子组件或嵌套组件时，也使用动态导入方法，它会出现错误无法加载模块。请注意，仅当嵌套组件放置在原始父组件的目录之外时才会发生此错误，这里的代码足够多。

我的 index.js 放在 src 下。

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';

    class Dynamic extends Component {
      constructor(props) {
        super(props);
        this.state = { module: null };
      }
      componentDidMount() {
          console.log('in comp mount')
          //alert("in comp mount")
        const { path } = this.props;
        import(`${path}`)
          .then(module => this.setState({ module: module.default }))
     }
      render() {
          console.log('in render')
         // alert("in render")
        const { module: Component } = this.state; // Assigning to …

我目前正在使用require.context加载所有.vue文件名不以Async.

const loadComponents = (Vue) => {
    const components = require.context('@/components', true, /\/[A-Z](?!\w*Async\.vue$)\w+\.vue$/);

    components.keys().forEach((filePath) => {
        const component = components(filePath);
        const componentName = path.basename(filePath, '.vue');

        // Dynamically register the component.
        Vue.component(componentName, component);
    });
};

现在我想加载以Asyncwith结尾的组件，require.context这样我就不必在创建这种类型的新组件时手动添加它们。

通常动态导入语法如下所示：

Vue.component('search-dropdown', () => import('./search/SearchDropdownAsync'));

这将通过承诺解决并动态导入组件。

出现的问题是，当您使用 时require.context，它会立即加载（需要）组件，而我无法使用动态导入。

有什么办法可以结合require.contextWebpack的动态导入语法吗？

https://webpack.js.org/guides/code-splitting/#dynamic-imports

我目前正在使用带有Suspense和Lazy的React 16来拆分我的代码库。虽然我想预加载组件。

在下面的示例中，我有两条路线。挂载Demo后有Prime没有预加载的方法？我尝试componentDidMount在Prime页面的中创建另一个动态导入，但React.lazy似乎并没有获得与下面的动态导入相同的文件。

import React, { lazy, Suspense } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import GlobalStyle from 'styles';

import Loading from 'common/Loading';
const Prime = lazy(() => import(/* webpackChunkName: "Prime" */'modules/Prime'));
const Demo = lazy(() => import(/* webpackChunkName: "Demo" */'modules/Demo'));

const App = () => (
  <main>
    <GlobalStyle />
    <Suspense fallback={<Loading>Loading...</Loading>}>
      <Switch>
        <Route path="/" component={Prime} exact />
        <Route path="/demo" component={Demo} />
      </Switch>
    </Suspense>
  </main>
); …

我有一个导航栏 npm 包，可以导入到其他项目中。它根据运行时从 Web 服务器加载的 JSON 配置文件动态导入 FontAwesome 图标。

当我构建 navbar 包时，整个 FontAwesome 库在构建目录中以块的形式结束，正如我所期望的那样。

当我在另一个项目中导入该导航栏模块时，该项目的构建不包含 FontAwesome 块。所以动态导入 HTTP 调用得到 404。

我在网上找不到太多关于这个用例的信息，可能是因为我不知道要查找的术语，可能是因为这首先是一个糟糕的想法。

我怎样才能让 webpack 看到一个包有动态导入并将必要的块复制到构建目录？

因此，我必须从 Angular 8 应用程序中的配置 json 文件加载一个值。

一开始我是静态加载它的，所以当 js 被缩小时 - json 中的未设置值被读取一次，再也不会读取。

然后我尝试像这样动态加载它：

应用程序组件.ts：

ngOnInit(): void {
    let appInfo = "";
    import("../assets/config/config.json").then(config => {
       appInfo = config.appInfo;
    });
    //using appInfo here - empty string.
}

好吧，那也没成功。它又被取消了。但它实际上存在于我的 config.json 中..

有人知道我可以尝试的另一种方法吗？

编辑：我想在我的 app.component.ts 的 ngOnInit 上访问它。我的情况是，在应用程序启动之前，有人会更新 config.json 中的 appInfo 值。我想在启动时访问它。也感谢大家的建议，我会尝试并更新哪些有效。

**** 编辑：所有动态加载技术都不适合我。尽管我尽一切可能避免它，但我最终还是通过 http 调用完成了它。

[...pageId].tsx我在 /pages 目录中有一个文件。

在 中getServerSideProps，页面将检查 CMS，并找到要呈现的组件列表。我想在服务器端加载这些组件，然后将它们渲染出来，然后返回页面。

如下所示使用 next/dynamic 将加载组件，但不会在服务器端渲染它们。他们只会在客户端上流式传输。换句话说：客户将首先看到“正在加载...”，然后呈现组件。这不是我想要的，也不是 SEO 想要的。

const getDynamicComponent = (c) => dynamic(() => import(`../../components/${c}`), {
  loading: () => <section>Loading...</section>,
  ssr: true
});

export default function SomePage({page}) {
  // Load dynamic component if necessary
  let DynamicComponent = getDynamicComponent(page.reactComponent);
  }
  return (
     <DynamicComponent page={page} />
  )
}

如何使用动态导入实现服务器端渲染？