我正在尝试使用Es6和SystemJs的模块系统。
这是我的图书馆代码
export function sayHello( name ) {
return `Hello ${name}`;
};
并导入app.js.
import { sayHello } from './lib'
sayHello('Myname');
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"target": "ES5",
"outDir": "built",
"rootDir": "src"
},
"include": [
"**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
的package.json
{
...
"dependencies": {
"lite-server": "^2.4.0",
"systemjs": "^3.1.1"
}
}
的index.html
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="/node_modules/systemjs/dist/system.min.js"></script>
<script>
System.import('/built/app.js').then(function(){
console.log('Done');
}, function(error){
console.log(error);
});
</script>
</body>
</html>
跑完后我看到了错误。
Uncaught ReferenceError: exports is not defined
请帮我，在哪里找到错误？
首先，
module文件中的tsconfig.json选项更改为"module": "system"，以解决导出问题。<script src="/node_modules/systemjs/dist/system.min.js"></script>之后添加以下内容以解决.js“扩展问题。
<script>
var systemResolve = System.resolve;
System.resolve = function (name, parent) {
return Promise.resolve(systemResolve.call(this, name, parent))
.then(function (resolved) {
if(!resolved.endsWith('.js'))
resolved += '.js';
return resolved;
});
};
</script>
我发现有必要在模块部分中放置system而不是commonjs。但是现在我对扩展有了另一个问题。 SystemJs无法加载模块，也不会添加“.js”扩展名。即使在添加System.defaultJSExtensions = true之后;