在使用es6,JSPM和system.js的Aurelia项目中,我很难使用本地AMD模块。我希望那里的人可以帮助我配置项目,以使我能够导入/加载我的AMD模块并在我的项目中使用它们。本地AMD样式模块的格式类似于以下格式:
define
(['require',
'lib/alerts/STARTSTOP',
'lib/alerts/STOPPED',
...
],
function( require, STARTSTOP, STOPPED, ... ) {
return {
alert: function( data ) {
var type = data.type;
var ev = data.event;
var cls = require( 'lib/alerts/' + ev );
return new cls( data );
}
};
});
当我尝试将此模块导入/加载到es6模块中时,遇到以下错误:Uncaught TypeError: Unexpected anonymous AMD define.
。尝试通过以下两种方式之一加载模块时收到此错误:
System.import('lib/alerts/AlertFactory').then( (m) => {
console.log( m );
});
或者
import AlertFactory from 'lib/alerts/AlertFactory.js';
我还确保将以下脚本添加到我的index.html中:
<script>
window.define = System.amdDefine;
window.require = window.requirejs = System.amdRequire;
</script>
除了上述内容,我还向我的config.js文件中添加了meta格式属性,但这似乎也无济于事。
meta: {
...
"lib/alerts/*.js": {
"format": "amd"
}
}
有人对我为什么会遇到我看到的错误以及如何正确加载模块有任何想法吗?感谢您提供的任何帮助/见解。
我终于意识到,这里的主要问题是我试图在Aurelia项目中使用现有的AMD模块,并且默认的Aurelia gulp构建假定所有代码都是用ES6编写的,并且未与AMD混合。这就是为什么我遇到问题。Vanilla jspm / system.js可处理多种模块格式,但Aurelia并非开箱即用。
只需将AMD模块取出来,src
这样babel将无法移植它。这是我用来导入jquery模块的有效解决方案:
首先,我local_packages
在项目根目录中有文件夹,并且有jquery模块local_packages/somelib/js/mymodule.js
然后在 config.js
paths: {
...
"local/*": "local_packages/*",
}
map: {
...
"somelib": "local/somelib",
"somelib1": "/local_packages/somelib1",
}
最后,我的导入看起来像: import 'somelib/js/mymodule';
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句