導入/導出模塊 - Typescript

Question

當我嘗試導入外部模塊並嘗試編譯我的代碼時，出現此錯誤消息：app.ts:1 Uncaught ReferenceError: require is not defined at app.ts:1。打字稿版本是：2.1.6。

我app.ts文件：

import {PI, calcCircumference } from "./math/circle"; 

console.log(PI); 
console.log(calcCircumference(10)); 
//console.log(); 

我circle.ts文件

export const PI: number = 3.14; 

export function calcCircumference(diameter: number) { 

    return diameter * PI; 
}; 

我tsconfig.json文件

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "target": "es5", 
     "noImplicitAny": false, 
     "sourceMap": true 
    } 
} 

Thanks all

Answer 1

我假設你正試圖在客戶端環境 - 你的瀏覽器中運行你的代碼。在這種情況下，您必須配置模塊加載器，因爲與node.js不同，服務器環境不像瀏覽器默認支持模塊加載，並且不知道如何「需要」特定模塊。

您有幾種選擇在這裏：

1. 捆綁工具，如browserify/webpack
2. 裝載機像requirejs/systemjs

谷歌，你會發現很多的教程如何設置打字稿用以上之一（例如：systemjs,webpack）

我的個人偏好是systemjs（作爲軟件包管理器，其中jspm） - 但是您的選擇將很大程度上取決於您構建的應用程序的特定要求。