Question

Here is SystemJS + TypeScript plunk，由official Angular plunk template创建。

它抛出

（SystemJS）SyntaxError：const声明中缺少初始值设定项

在eval（）

...

错误，当文件不包含import或export语句时，显然将.ts文件评估为普通JavaScript：

main.ts

const foo: boolean = 'foo';

console.log(foo);

config.js

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {

    'app': './src',
    ...
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    ...
  }
});

的index.html

...
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
  .catch(console.error.bind(console));
</script>
...

但the same plunk is fine当文件有ES6模块的迹象时：

main.ts

const foo: boolean = 'foo';

console.log(foo);

export default null;

显然，如果文件的扩展名为.ts，我宁愿将其评估为TypeScript，无论是否导入。

为什么会在此设置中发生这种情况？如何解决这个问题？

Answer 1

SystemJS可能会如下工作：

> System.import('app')
  - where is 'app'?
> map: { 'app': './src', ...
  - Okay, 'app' is './src'
  - './src' ??
> packages: { app: { main: './main.ts',
  - Aha, './src/main.ts'
> ./src/main.ts
  - Which format??
  - 'system' ? -> No
  - 'esm' ? -> No (if YES, use transpiler: 'typescript')
  - 'amd' ? -> No
  - 'cjs' ? -> No
  - 'global' ? -> Yes -> No transpiler needed.
> evaluate ./src/main.ts
  - What is ':string' in JavaScript?
  - Exception!!!

Module format detection

未设置模块格式时，自动基于正则表达式使用检测。此模块格式检测永远不会完全准确，但适合大多数用例。

如果自动检测失败，则必须手动指定。

方法1：向来源添加提示

ex1：添加export（来自问题）

const foo: boolean = 'foo';
console.log(foo);
export default null;

ex2：添加export

export const foo: boolean = 'foo';
console.log(foo);

方法2：添加format配置

ex1：packages / path / meta / pattern（./ main.ts或./*.ts）/ format

packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts',
      meta: {
       './main.ts': {
           format: 'esm'
        }
      } 
    }

ex2：packages / path / format

packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts',
      format: 'esm'
    }
}

ex3：元/模式（需要app /前缀）/ format（外部包）

meta: {
    'app/main.ts': {
        format: 'esm'
    }
}

Answer 2

免责声明：这只是一点点调试，我实际上并没有在这个主题上遇到过经验，所以对我理解的任何更正都是受欢迎的。

如果模块格式正确确定，SystemJS将仅执行转换。如果没有通知模块格式，它会使用快速启发式来尝试并确定它（基本上是源上的正则表达式）。当您拥有 import 语句时，此启发式方法可以正常工作，而如果您没有，则会失败。设置的实际修复是将模块格式显式添加到包中，如下所示：

app: {
  main: './main.ts',
  defaultExtension: 'ts',
  format:'esm' // << Module format.
},

.ts文件不被视为TypeScript模块

2 个答案: