我一直在通过Webpack教程.在其中一个部分中,它给出了代码示例,其中包含一行本质问题:
export default class Button { /* class code here */ }
在所述教程的下一部分,标题为"代码分割",上面定义的类是按需加载的,如下所示:
require.ensure([], () => {
const Button = require("./Components/Button");
const button = new Button("google.com");
// ...
});
不幸的是,此代码抛出异常:
Uncaught TypeError: Button is not a function
现在,我知道包含ES6模块的正确方法是简单地import Button from './Components/Button';在文件的顶部,但是在文件中的任何其他地方使用类似的构造会让babel成为一个悲伤的熊猫:
SyntaxError: index.js: 'import' and 'export' may only appear at the top level
在require.ensure()上面的上一个()示例的一些摆弄之后,我意识到ES6 export default语法导出一个具有名为property的对象,该对象default包含我的代码(Button函数).
我通过.default在require调用后附加来修复损坏的代码示例,如下所示:
const Button = require("./Components/Button").default;
...但我认为它看起来有点笨拙并且容易出错(我必须知道哪个模块使用ES6语法,哪个使用旧版本module.exports).
这让我 …
与巴贝尔发生反应.我对import和module.exports感到困惑.在将ES6代码转换为ES5时,我假设babel将导入和导出分别转换为require和module.exports.
如果我从一个模块导出一个函数并在另一个模块中导入该函数,代码执行正常.但是如果我使用module.exports导出函数并使用"import"导入,则会在运行时抛出错误,表示它不是函数.
我做了一个例子.
// Tiger.js
function Tiger() {
function roar(terrian){
console.log('Hey i am in ' + terrian + ' and i am roaing');
};
return roar;
}
module.exports = Tiger;
// animal.js
import { Tiger } from './animals';
var animal = Tiger();
animal("jungle");
我使用预设es2015的babel进行反编译.这给了我以下错误
未捕获的TypeError:(0,_ animals.Tiger)不是函数
但是如果我删除它module.exports = Tiger;并用它替换export { Tiger };它工作正常.
我在这里失踪了什么？
编辑: 我使用browserify作为模块捆绑器.
我有一个ES6应用程序(带Babel 6.5和Webpack),它成功导入我的模块,如下所示:
import $ from 'jquery';
我想安装https://github.com/robflaherty/riveted/blob/master/riveted.js(对于谷歌分析插件),但你可以看到,该代码没有类似的东西module.exports = ...,它只是定义了一个全局变量riveted,但它有一个明显有效的package.json指向riveted.js.
所以做类似的事情
import riveted from 'riveted'
riveted.init();
抛出错误:
_riveted2.default.init不是一个函数
import riveted from 'riveted'
riveted.init();import 'riveted'
riveted.init();
抛出错误:
铆接没有定义
import * as riveted from 'riveted'
riveted.init();
抛出错误:
riveted.init不是一个功能
如何访问riveted的init()函数？
我es6-module-loader在一个Angular 2项目中使用它,它非常适合TypeScript在Web浏览器中实时加载模块.现在,我正在将此项目升级到Angular 6,但是这里imports的加载模块的依赖关系不符合.例如:
declare var SystemLoader:any;
export class DemoClass {
constructor() {
var source = "export class Foo { " +
"constructor() { console.log('Created the ES6 class foo!'); } " +
"execMethod() { console.log('Executed method!') }" +
"}";
SystemLoader.module(source, {name: _name}).then(function (module: any) {
module.Foo.prototype.execMethod();
}
}
}
以前的代码适用于Angular 6.它将加载模块Foo并在中打印这些行Console.但是如果我让模块有点复杂并添加import如下:
declare var SystemLoader:any;
export class DemoClass {
constructor() {
var source = …我正在尝试将使用ES6导入模块语法的Angular 1.5,UI路由器与Babel和Webpack结合起来.
在我的app.js中,我有:
'use strict';
import angular from 'angular';
import uiRouter from 'angular-ui-router';
...
import LoginCtrl from './login/login.ctrl.js'
const app = angular.module("app", [
uiRouter,
...
])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: '...',
controller: LoginCtrl,
controllerAs: 'login'
})
});
在login/login.ctrl.js我有:
'use strict';
export default app.controller("LoginCtrl", function() {
//code here
});
当我启动我的应用程序时,我有以下错误消息:
ReferenceError: app is not defined
bundle.js:35422:2
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:nomod] Module 'app' is not available! You either misspelled the module …javascript angularjs ecmascript-6 angular-ui-router es6-module-loader
我正在考虑从Dart转到ES6,但Chrome似乎不支持对我来说至关重要的新导入语句.
我使用了这个站点的(命名导出)代码:http://www.2ality.com/2014/09/es6-modules-final.html
我甚至试过了
<module import="main"><module>
我收到错误:"意外的令牌导入"
如果他们在最终版本发布之前支持它的任何信息？
码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ES6</title>
</head>
<body bgcolor="blue">
<script type="module" src="main.js"></script>
</body>
</html>
main.js
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
lib.js:
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
在互联网上看,我对特殊的"index.js"模块文件感到困惑.
使用babelJS + nodeJS或Browserify/Webpack我可以使用import myLib from "./libs"(即省略/index或/index.js部分)在"libs"目录中导入"index.js"模块.
是否支持ES6(EcmaScript 2015)模块官方标准的"index.js"模块解析(指定包含文件夹)？或者它只是"自定义"NodeJS/CommonJS转换行为？
是否可以省略/index| /index.js在所有浏览器中导入的一部分(当所有浏览器都支持模块时)？
javascript node.js ecmascript-6 es6-module-loader es6-modules
我在TS再出口方面有点迷失.假设我创建了一对测试模块;
test1.ts;
export function test1() {
return 'test';
}
test2.ts;
export function test2() {
return 'test';
}
我相信我应该能够做到这样的事情;
combined.ts;
export * from './test1';
export * from './test2';
module.exports = {
test1: test1,
test2: test2
};
但是,没有这样的运气.似乎有很多GitHub问题讨论了各种方法,包括旧的hack使用,export import * from './test1'但他们似乎都在争论ES6规范的真正意义,并且没有一个真正起作用.
这样做汇总的正确方法是什么？我是否只是走错路径将文件拆分成文件？名称空间在这里更合适吗？
我有一个使用SystemJS的SPA(在Aurelia/TypeScript中,但这无关紧要).让我们说它运行于http://spa:5000/app.
它有时会像waterservice/external.js外部URL一样按需加载JavaScript模块http://otherhost:5002/fetchmodule?moduleId=waterservice.external.js.我用SystemJS.import(url)它做这个,它工作正常.
但是当这个外部模块想要导入另一个模块时,import { OtherClass } from './other-class';这个(可理解的)不起作用.当它被SPA加载时,它会看到http://spa:5000/app/other-class.js.在这种情况下,我必须拦截路径/位置以将其重定向到http://otherhost:5002/fetchmodule?moduleId=other-class.js.
注意:waterservice/external.ts作品查找的Typescript编译因为typescript编译器可以./other-class.ts轻松找到.显然我不能使用绝对URL进行导入.
如何拦截我使用SystemJS导入的模块内的模块加载？
我已经测试过的一种方法是在SystemJS配置中添加映射.如果我像它一样导入它import { OtherClass } from 'other-class';并添加一个像"other-class": "http://otherhost:5002/fetchmodule?moduleId=other-class"它一样的映射.但是如果这种方法很好,我怎样才能在运行时动态添加映射？
其他方法,如通用加载URL拦截也是受欢迎的.
更新
我尝试拦截SystemJS,就像这样的artem
var systemLoader = SystemJS;
var defaultNormalize = systemLoader.normalize;
systemLoader.normalize = function(name, parentName) {
console.error("Intercepting", name, parentName);
return defaultNormalize(name, parentName);
}
这通常不会改变任何东西,只会产生一些控制台输出以查看正在发生的事情.不幸的是,这似乎改变了一些东西,因为我得到一个错误未捕获(在承诺中)TypeError:this.has不是一个函数内部system.js.
然后我尝试添加映射SystemJS.config({map: ...});.令人惊讶的是,这个函数是增量的,所以当我调用它时,它不会松开已经提供的映射.所以我可以这样做:
System.config({map: {
"other-class": `http://otherhost:5002/fetchModule?moduleId=other-class.js`
}});
这不适用于相对路径(以 …
我正在尝试在我的节点项目中使用Typescript,但是遇到了一些问题.
这是我的index.ts文件:
import express from 'express';
const app = express();
我在跑:
tsc --module commonsjs -d index.ts
我的输出是index.js:
var express_1 = require('express');
var app = express_1["default"]();
这["default"]是从哪里来的？它使我的代码无法正常运行:
var app = express_1["default"]();
^
TypeError: express_1.default is not a function
据我所知,我应该得到没有"默认"括号的代码,它会工作正常 - 我尝试删除括号,它的工作原理.
我在这里错过了什么？
ecmascript-6 ×7
javascript ×7
node.js ×2
typescript ×2
webpack ×2
angular ×1
angularjs ×1
babeljs ×1
commonjs ×1
es6-modules ×1
systemjs ×1