在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); 
}; 
});

请让我知道如果有什么我做错了，或者什么我需要添加。感谢你的帮助！

你能告诉你如何在模块导入'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;

工作就像一个魅力！ – anon

在JavaScript Webpack项目中过渡到Typescript（如何导出模块）

相关推荐