Question

我正在尝试将模块系统与Es6和SystemJs一起使用。

这是我的图书馆代码

export function sayHello( name ) {
    return `Hello ${name}`;
};

并导入app.js。

import { sayHello } from './lib'
sayHello('Myname');

tscongig.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

请帮助我在哪里找到错误？

Answer 1

首先，

将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>

Answer 2

I found that it is necessary to put system instead of commonjs in module section. But now I have enother problem with the extension. SystemJs cannot load modules and does not add ".js" extension. Even after adding System.defaultJSExtensions = true;

SystemJS没有看到导出

2 个答案: