标签: dynamic-import

src/dynamicImport.js

\nexport default function dynamicImport(path) {\n    const parts = path.split(\'/\');\n    // \xe5\x8e\xbb\xe6\x8e\x89\xe5\x90\x8e\xe7\xbc\x80.js\n    const namespace = parts.pop().replace(/\\.\\w+$/, \'\');\n    let mid = \'\';\n\n    if (parts.length) {\n        mid = `${parts.join(\'/\')}/`;\n    }\n\n    return new Promise((resolve, reject) => {\n        console.log(mid, namespace)\n        import(\n            `@src/${mid}` + namespace + \'.js\'\n        )\n            .then(module => {\n                resolve(module);\n            })\n            .catch(err => {\n                reject(err);\n            });\n    });\n}\n\n

src/index.js

dynamicImport(\'lib/test\').then(({ default: test}) => {\n    test();\n})\n\n

src/lib/test.js

export default function test() {}\n\n

rollup.config.js

const rollup = require(\'rollup\');\nconst babel …

这就是我为一个项目所做的.我有一些基本上是字典的数据结构,其中一些方法对数据进行操作.当我将它们保存到磁盘时,我将它们写为.py文件作为代码,当作为模块导入时,会将相同的数据加载到这样的数据结构中.

这合理吗？有什么大的缺点吗？我看到的优点是,当我想使用保存的数据进行操作时,我可以快速导入我需要的模块.此外,模块可以与应用程序的其余部分分开使用,因为您不需要单独的解析器或加载器功能.

在尝试移植我们的一些 JS 代码以使用模块时，我遇到了这个我无法解释的特殊情况。我正在设置我的主要 JS 文件，以便为我的主要入口点进行动态导入，然后他们又为他们需要的所有文件进行导入。设置如下所示：

索引.js

(async function () {
    await import('./firstLevel1.js');
    await import('./firstLevel2.js');
 })()

第一层1.js

(async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
})()

第一层2.js

(async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
})()

由于我导入的某些代码是遗留代码，因此我将 index.js 的脚本标记设置为 async="false" 以确保所有文件都以正确的顺序加载。在这个特定的例子中，我希望加载顺序是 index.js、firstLevel1.js、secondLevel1.js、secondLevel2.js、firstLevel2.js。secondLevel3.js 最后是 secondLevel4.js。但是当我查看 chrome 中的加载顺序时，这就是我所看到的。

这对我来说变得有问题，因为 JS 加载的顺序不是我想要正确设置旧文件的顺序。

为什么我看到的加载顺序与我预期的不同？有没有办法让它们同步加载？

使用 React，谁能解释一下为什么当我们使用变量时动态导入会失败？

// Do not work
let module = "./DynamicComponent";
import(module).then(ModuleLoaded => {})

// Works
import("./DynamicComponent").then(ModuleLoaded => {})

我尝试刷新浏览器缓存但没有任何变化。

假设我有两个不同的模块,它们具有统一(相同)的接口.文件列表如下:

root/
   logic.py
   sns_api/
      __init__.py
      facebook/
          pyfacebook.py
          __init__.py
      myspace/
          pymyspace.py
          __init__.py

并且pyfacebook.py和pymyspace.py具有相同的接口,这意味着:

# in pyfacebook.py
class Facebook:
   def __init__(self, a, b):
       # do the init
   def method1(self, a, b, ...):
       # do the logic

# in pymyspace.py
class Myspace:
   def __init__(self, a, b):
       # do the init
   def method1(self, a, b, ...):
       # do the logic

现在我有一个问题.我想在logic.py中执行逻辑而不复制代码,所以我想知道如何设置一个标志来显示我使用的模块,python将自动加载正确的代码,这意味着:

# in logic.py

PLATFORM = "facebook"

# import the right modules in, complete the logic with the current platform
# create the right …

我想懒洋洋地导入Elm中函数的定义.用例是浏览器,我可能有多个视图,我不需要为初始页面加载呈现,所以我想推迟这些网络请求以加快初始加载.Polymer使用它们的PRPL模式执行此操作,您可以在其中延迟加载自定义元素的定义.我环顾四周,但未能找到任何暗示甚至可以在榆树中使用的东西.

任何想法,将不胜感激.如果没有表面,我会认为这是不可能的.

我一直在尝试使用 import() 函数来导入运行时动态的东西。我认为只要我为文件创建一个条目，webpack 就可以足够智能地 import() 正确的模块，但情况似乎并非如此。

有谁知道一种方法来分块条目并使用 import() 语法，为其提供一个变量，并让它在运行时工作？

根本问题的一个简单示例如下：

// works
import( './a.js' ).then(() => console.log('it worked'));

// something is a dynamic variable that changes at runtime
const something = './a.js';
// does not work, even with this simplistic example
import( something ).catch(() => console.log('it did not work'));

我刚刚注意到 Angular 8（即将发布）已经弃用了“字符串类型路由器loadChildren”。（门票）

我是否正确理解他们指的是......

const routes = [
  {
    path: 'production',
    loadChildren: './production/production.module#ProductionModule' // <<--this
  }],

要迁移到 Angular 8，解决方案是什么？

在票证中，他们指的是“动态导入”。我是否正确，这是指以下提案：

let module = await import('/modules/my-module.js');

如果我们将来想使用延迟加载，有人可以预览一下路由文件实际上应该是什么样子吗？

我\xe2\x80\x99 已经使用 Typescript 一段时间了。我们在前端 Web 组件中使用本地化，并且我们有自己的实现。

因此，我们有一个翻译文件夹，其中包含所有以翻译作为键值对的语言环境文件。

我们使用区域设置文件根据用户从浏览器中选择的语言加载翻译文件。

我们通过动态导入来加载语言环境：

{\n  'component': locale => import(`./translations/${locale}.ts`),\n},\n

虽然当我们使用扩展时一切正常，.js但当我们使用 时.ts，tsc无法转译这部分代码。

我希望构建是这样的：

{\n  'component': locale => import(`./translations/${locale}.js`),\n},\n

有人知道这是为什么吗？

我试图通过实现AsyncCompoment类来在React中延迟加载路由，如创建React App中的代码拆分所述。以下是本教程中的es6 asyncComponent函数：

import React, { Component } from "react";

    export default function asyncComponent(importComponent) {
      class AsyncComponent extends Component {
        constructor(props) {
          super(props);

          this.state = {
            component: null
          };
        }

        async componentDidMount() {
          const { default: component } = await importComponent();

          this.setState({
            component: component
          });
        }

        render() {
          const C = this.state.component;

          return C ? <C {...this.props} /> : null;
        }
      }

      return AsyncComponent;
    }

我已经在打字稿中编写了此函数，并且可以确认组件确实被延迟加载了。我面临的问题是它们没有被渲染。我能够确定componentDidMount挂钩中的组件对象始终是未定义的：

//AsyncComponent.tsx
async componentDidMount() {
              const { default: component } = await importComponent(); …