.ts tệp không được coi là mô-đun TypeScript

Question

Here is SystemJS + TypeScript plunk, được tạo từ official Angular plunk template.

Nó ném

(SystemJS) SyntaxError: Missing initializer in const declaration

at eval()

...

lỗi và rõ ràng là đánh giá nộp .ts JavaScript như bình thường khi tập tin không chứa import hoặc export báo cáo:

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

Nhưng the same plunk is fine khi tập tin có dấu hiệu ES6 mô-đun:

main.ts

const foo: boolean = 'foo'; 

console.log(foo); 

export default null; 

Rõ ràng, nếu một tệp có phần mở rộng .ts, tôi muốn đánh giá nó như TypeScript, cho dù nó có nhập gì đó hay không.

Tại sao điều này xảy ra trong thiết lập này? Làm thế nào để sửa cái này?

Answer 1

SystemJS lẽ sẽ làm việc như sau:

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

Nếu phát hiện tự động không thành công, bạn phải chỉ định thủ công.

Phương pháp 1: Thêm gợi ý để nguồn

EX1: thêm export (từ câu hỏi)

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

EX2: thêm export

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

Phương pháp 2: Thêm format cấu hình

EX1: gói/path/meta/mẫu (./ main.ts hoặc ./*.ts)/format

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

EX2: gói/path/format

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

ex3: meta/pattern (cần app/prefix)/format (gói bên ngoài)

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

Answer 2

Tuyên bố từ chối trách nhiệm: Điều này xuất phát từ một lần gỡ lỗi nhỏ, tôi không thực sự có kinh nghiệm trong chủ đề vì vậy mọi chỉnh sửa đối với sự hiểu biết của tôi đều được hoan nghênh.

SystemJS sẽ chỉ thực hiện transpilation nếu định dạng mô-đun được xác định chính xác. Nếu định dạng mô-đun không được thông báo, nó sử dụng một heuristic nhanh để thử và xác định nó (về cơ bản, một biểu thức chính quy trên nguồn). Công cụ heuristic này hoạt động khi bạn có tuyên bố nhập và không thành công khi bạn không làm như vậy. Việc sửa chữa thực tế cho thiết lập của mình là thêm định dạng mô-đun một cách rõ ràng để các gói như sau:

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