typescript - .ts 文件不被视为 TypeScript 模块

Question

Here is SystemJS + TypeScript plunk , 从 official Angular plunk template 创建.

它抛出

(SystemJS) SyntaxError: Missing initializer in const declaration

at 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

When the module format is not set, automatic regular-expression-based detection is used. This module format detection is never completely accurate, but caters well for the majority use cases.

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

方法一:给源添加提示

ex1:添加export(来自问题)

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

ex2: 添加export

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

方法二:添加format配置

ex1: packages/path/meta/pattern(./main.ts or ./*.ts)/format

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

ex2: 包/路径/格式

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

ex3: meta/pattern (需要 app/前缀)/format (外包)

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