在JavaScript Webpack項目中過渡到Typescript（如何導出模塊）

我目前正在嘗試開始將JavaScript Webpack項目轉換爲在Typescript中工作的過程，以便一切都很好地輸入。但是，我的配置似乎無法識別我已更改爲Typescript的一個文件。在JavaScript Webpack項目中過渡到Typescript（如何導出模塊）

該項目編譯，但我在運行時出現此錯誤：

TypeError: Angle.cyclic3dAxis is not a function

角（以前JavaScript）的文件，我在打字稿重寫，包括2層小靜的功能，格式爲：

export class Angle 
{ 
    public static cyclic3dAxis(i: number): number{ /* function defined here */ } 
    public static anotherFunction(): number{/*defined here*/} 
}

原始JavaScript文件（即沒寫，但工程），我與TS一個代替：

define([],function() 
{ 
var Angle = { }; 
Angle.cyclic3dAxis = function(i) { /* function defined here */ }; 
Angle.anotherFunction = function() { /* defined here */ }; 
return Angle; 
});

這些函數包含相同的代碼。

的webpack.config.json的相關部分：

/* some vars declared here truncated for brevity */ 
module.exports = function(env) 
{ 
/* more stuff here */ 

resolve : { 
    alias: { 
     Cesium: path.resolve(__dirname, "scripts/Cesium/Cesium.js") 
    }, 
    extensions: [".ts", ".tsx", ".js", ".json"] 
}, 
module: { 
    rules : [ 
     { 
      test: /\.js$/, 
      exclude: /(Cesium|node_modules)/, 
      use: [ 
       { 
        loader: 'babel-loader', 
        options: { 
         presets: ['es2015'], 

        } 
       } 
      ] 
     }, 
     { 
      test: /\.tsx?$/, 
      exclude: /(Cesium|node_modules)/, 
      use: [ 
       { 
        loader: 'awesome-typescript-loader' 
       } 
      ] 
     }, 
/* and more */

和我tsconfig.json：

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "target": "es6", 
     "sourceMap": true 
    } 
}

整個項目是相當大的，所以如果我設置「allowJs」爲真，我收到關於Javascript堆內存不足的錯誤。

角度由其他JavaScript文件引用項目，像這樣：

define([ 
    './Angle', 
    ], 
function(
    Angle 
} 
{ 
/* example function call */ 
functionName = function(i) { 
    return Angle.cyclic3dAxis(i); 
}; 
});

請讓我知道如果有什麼我做錯了，或者什麼我需要添加。感謝你的幫助！

來源

2017-08-01 anon

你能告訴你如何在模塊導入'Angle'使用'Angle.cyclic3dAxis'？ – Stubb0rn

更新的問題 – anon

轉換文件中導出的結構與原始JS文件中的導出不匹配。模塊應該是這樣的：

或者，如果你需要有靜態方法應該與export = Angle;出口類：

class Angle 
{ 
    public static cyclic3dAxis(i: number): number{ /* function defined here */ } 
    public static anotherFunction(): number{/*defined here*/} 
} 

export = Angle;

來源

2017-08-01 17:14:28 Stubb0rn

工作就像一個魅力！ – anon

在JavaScript Webpack項目中過渡到Typescript（如何導出模塊）

回答

相關問題