对不起,如果问题太简单了,但我在这里遗漏了一些东西.刚刚切换了一个看起来像的ES5模块:
module.exports = {
func1: function(a, b) {...},
func2: function(a, b) {...}
};
对于看起来像这样的ES6类:
export default class {
func1(a, b) {...}
func2(a, b) {...}
}
一切都很好:在这两种情况下我都可以export mod from 'module';并且打电话mod.func1(a, b)和mod.func2(a, b).
但是,我有一个函数可以调用模块函数来调用:
var caller = function(func, val1, val2) {
let a = something(val1);
let b = something(val2);
return func(a, b);
};
当我打电话时,caller(mod.func1, x, y)我得到了第一个实现所需的结果,但是undefined is not a function第二个实现了.
在两种情况下都打印出mod.func1返回值[Function],但显然从ES6类返回了其他内容.
我做错了什么,如何获得我可以在另一个函数中调用的类函数？
更新:使用第二个实现,我忘了添加实例化代码:
import Mod from 'module'; …我有一个名为的模块fooModule.在这个模块中,我导入fooModule(本身):
import * as fooModule from './fooModule';
export function logFoo() {
console.log(fooModule)
}
当logFoo()被调用时,我可以看到所有的fooModule的出口.这是如何运作的？
我正在尝试使用index.js桶导出默认模块,但似乎无法使其工作.它适用于命名导出,但不适用于默认导出.
简化的项目结构
/hellos
/components
Hello.js
Hellos.js
index.js
index.js
App.js
/hellos/component/Hellos.js
...
export default Hellos
/hellos/component/index.js
export * from './Hello';
export * from './Hellos';
/hellos/index.js
export * from './components'
export * from './actions'
export * from './constants'
export * from './reducers'
App.js
import Hellos from './hellos'
console.log(Hellos) // <- undefined
上面导入的Hellos模块始终未定义.
我可以使用命名导出或App.js中的直接导入来使用它,import Hellos from './hellos/component/Hellos'但我认为这是一种不好的做法,只是希望使用import Hellos from '/hellos'.
我怀疑问题出在index.js桶上,但我无法解决问题.请帮忙.
是否可以像ES#或其他编程语言一样将依赖注入ES2015模块？如果我导入一个模块,我会为它创建一个硬依赖项,并且以后不能在运行时更改它.例如,我有以下JavaScript代码:
import Animal from './dog';
class Person {
feedAnimal() {
new Animal().feed();
}
}
我正在导入狗模块.但是,如果我想把它改成猫呢？目前我必须手动修改第1行,但在某些情况下我希望它可以从外部进行配置,以便在某些情况下应该有一只猫,在某些其他条件下它应该是猫.所有可以通过经典依赖注入完成的事情.
javascript dependency-injection ecmascript-6 es6-module-loader
是否有任何现有的ES6模块运行时捆绑解决方案？
我希望在MVC5 Web应用程序中简化JavaScript代码开发.我们遇到了大型,笨拙的JS文件的问题,所以我希望得到一个模块加载器系统.到目前为止,我没有为ES6或其他模块加载器格式找到任何现有的bundle变换器.我可以使用TypeScript或nodejs require样式.但我不想使用require.js样式.
也许有一个很好的理由这个解决方案不存在.对于运行时捆绑解决方案,依赖解析处理可能过多.但是,我认为值得一试.
最终,这是我想要的,但我现在需要一个止损解决方案.我知道如何使用grunt/gulp/webpack为HTML客户端组建一个构建系统.但我不想webpack -w在开发期间告诉开发人员运行或类似的东西.我也不想告诉他们为每次JS变更重建解决方案.他们应该能够修改文件,刷新浏览器,并查看更改.
这是我最终可能会走的路线.基本上,这个JS代码库由jQuery小部件和普通JS(帮助器/公共函数)组成.所以,如果我在这个目录结构中构造代码并包含js dir,它应该让我大部分时间都在那里:
小部件应该没问题.帮助者,我可以看到一个函数/类依赖于另一个函数/类的问题.虽然,因为函数调用永远不应该以帮助程序(只是一个小部件)开始,所以这应该可以正常工作,假设没有使用全局变量(或者可能是一个像'App'这样的全局变量).
我想了解命名和默认导出.我有一个看似基本的要求,我不明白如何设置.
我希望能够同时导入:
//app.js
import Mod from './my-module'
import { funcA, funcB } from './my-module'
console.log('A', Mod.funcA(), funcA()); // A a a
console.log('B', Mod.funcB(), funcB()); // A a a
当我尝试时,我最接近的方法是:
//my-module.js
export function funcA() { return 'a'; };
export function funcB() { return 'b'; };
export default {funcA, funcB}
我的麻烦是我不想重新索引默认导出中的每个函数.我只是想定义我的函数,然后确保它们被导出,所以我可以使用它们.
建议？或者我必须使用import * as Mod from './my-module';？
对于es6导入和导出的确切内容,没有任何明确的解释.有人将导入描述为只读视图.检查以下代码:
// lib/counter.js
export let counter = 1;
export function increment() {
counter++;
}
export function decrement() {
counter--;
}
// src/main.js
import * as counter from '../../counter';
console.log(counter.counter); // 1
counter.increment();
console..log(counter.counter); // 2
我的问题是,如果两个模块导入相同的计数器模块并且第一个模块递增计数器,第二个模块是否也会看到计数器递增？"进口"和"出口"做什么？在什么上下文中执行增量函数？什么是增量函数的变量对象？
// lib/counter.js
export let counter = 1;
export function increment() {
counter++;
}
export function decrement() {
counter--;
}
// src/main1.js
import * as counter from '../../counter';
console.log(counter.counter); // 1
counter.increment();
console..log(counter.counter); // 2
// src/main2.js
import * as counter from '../../counter';
console.log(counter.counter); // …我了解ES6模块规范,问题在于它的支持.AFAIK,没有本机实现此功能的浏览器(请参阅此处的浏览器兼容性 ).有几个问题:
我正在开始一个新项目，我想要在其中使用 ES6 样式模块，但是，我无法让它在浏览器中运行。我正在使用 Chrome。
我将问题隔离在很少的代码行中。
这是我的 2 个 TypeScript 文件：
应用程序
import { Component } from './component';
var component: Component = new Component();
组件.ts
export class Component {
}
以下是它们编译为 JavaScript 的方式：
应用程序.js
import { Component } from './component';
var component = new Component();
组件.js
export class Component {
}
我的 index.html 只包含一个脚本标签。我尝试了一些变体，但没有一个奏效。
index.html #1
<script src="src/app.js" type="module"></script>
未加载脚本。（网络选项卡中没有请求）
index.html #2
<script src="src/app.js" type=module></script>
未加载脚本。（网络选项卡中没有请求）
index.html #3
<script src="src/app.js"></script>
未捕获的语法错误：意外的标记 {
我正在使用 tsc 通过 Visual Studio Code 转译 TypeScript。
任务文件 …
我有两个文件，file1 导出一个变量“不是常量” var x=1 和 file2 从中导入这个变量
问题是我无法修改导入的变量，即使它不是常量！
文件1.js
export var x=1 //it is defined as a variable not a constant
文件2.js
import {x} from 'file1.js'
console.log(x) //1
x=2 //Error: Assignment to constant variable
javascript node.js ecmascript-6 es6-module-loader es6-modules