我有这个模块,它将外部库与其他逻辑组件化,而无需将<script>标记直接添加到index.html中:

import 'http://external.com/path/file.js'
//import '../js/file.js'

@Component({
    selector: 'my-app',
    template: `
        <script src="http://iknow.com/this/does/not/work/either/file.js"></script>
        <div>Template</div>`
})
export class MyAppComponent {...}

我注意到importES6规范是静态的,并且在TypeScript转换过程中而不是在运行时解析.

无论如何要使它可配置,以便file.js将从CDN或本地文件夹加载？如何告诉Angular 2动态加载脚本？

条件

是否可以使用下面的条件导入语句？

if (foo === bar) {
    import Baz from './Baz';
}

我已经尝试了上述但在编译时得到以下错误(来自Babel).

'import' and 'export' may only appear at the top level

动态

是否可以使用如下的动态导入语句？

for (let foo in bar) {
    if (bar.hasOwnProperty(foo)) {
        import Baz from `./${foo}`;
    }
}

以上在编译时从Babel收到相同的错误.

这是可能做的还是我缺少的东西？

推理

我试图这样做的原因是我有很多"页面"的导入,它们遵循类似的模式.我想通过动态for循环导入这些文件来清理我的代码库.

如果这是不可能的,那么有更好的方法来处理ES6中的大量导入吗？

这有效:

import app from './../app.js';

但这不是:

import app from path.join(process.cwd(), 'app');

我越来越:

SyntaxError: /path/file.js: Unexpected token (5:16)
> 5 | import app from path.join(process.cwd(), 'app');
    |                 ^

有可能(和/或如何)使用"动态"路径？(不是硬编码路径或依赖相对路径).

是否可以像ES#或其他编程语言一样将依赖注入ES2015模块？如果我导入一个模块,我会为它创建一个硬依赖项,并且以后不能在运行时更改它.例如,我有以下JavaScript代码:

import Animal from './dog';

class Person {
  feedAnimal() {
    new Animal().feed();
  }
}

我正在导入狗模块.但是,如果我想把它改成猫呢？目前我必须手动修改第1行,但在某些情况下我希望它可以从外部进行配置,以便在某些情况下应该有一只猫,在某些其他条件下它应该是猫.所有可以通过经典依赖注入完成的事情.

我知道有一些DI框架存在像散,电解质,电线等可惜大多需要一些特殊的语法,并没有对由ES2015模块.

执行此行时:

import stats from `./${process.env.STATS}`

报告以下错误:

解析错误:意外的令牌`

可以使用以下表达式成功加载模块:

const stats = require(`./${process.env.STATS}`);

该import语句似乎需要一个常规字符串,因为它与语句一起使用:

import stats from './statsdir'

'./statsdir'它的价值在哪里process.env.STATS.

为什么会出现错误？

是ES2015 +,我该如何动态导入模块？

而不是......

import {SomeClass} from 'lib/whatever/some-class';

我不知道运行时的路径,所以我希望将路径存储在变量中,并且我想从该模块导入特定的东西:

function doDynamicStuff(path) {
    let importedThing = ...; //import * as importedThing from path;
    let thingIReallyWant = importedThing.someExportedVariable;

    ...
}

我不确定使用什么语法,或者根本不可能这样做.我尝试过使用,let importedThing = require(path);但我们没有使用RequireJS.

我有以下父组件，它必须呈现动态子组件列表：

<template>
  <div>
    <div v-for="(componentName, index) in supportedComponents" :key="index">
      <component v-bind:is="componentName"></component>
    </div>
   </div>
 </template>

<script>
const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");
export default {
  name: "parentComponent",
  components: {
    Component1,
    Component2
  },
  props: {
    supportedComponents: {
      type: Array,
      required: true
    }
  }
};
</script>

该supportedComponents属性是我想在父组件中呈现的组件名称列表。

为了使用父组件中的子组件，我必须导入它们并注册它们。

但唯一的方法是对组件的导入路径进行硬编码：

const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");

然后像这样注册它们：

components: {
  Component1,
  Component2
}

我想保持我的parentComponent尽可能通用。这意味着我必须找到一种方法来避免导入语句和注册中的硬编码组件路径。我想注入parentComponent它应该导入和渲染的子组件。

这在 Vue 中可能吗？如果是，那么如何？