通過Webpack從打字稿中導出對象並在JS中使用它

Question

我想要做的是將我在Typescript中編寫的庫與Webpack 2捆綁在一起，甚至可以在香草JS中使用該庫。 建築物運行良好且沒有錯誤，但是在使用導出的對象時，它看起來像一個空對象{} 。

因此，我嘗試執行以下操作：

將庫捆綁在bundle.js文件中
創建一個my-js-script.js文件，該文件將.ts文件導出的對象記錄到控制台
創建一個index.html文件
導入bundle.js和my-js-script.js文件
服務index.html文件，然后在控制台中查看該對象。

打字稿文件

import {SomeStuff} from 'some-stuff';

export class ClassA {
    constructor(){
        // Does other stuff with SomeStuff
    }
}

// What I want to achieve is something like this
export const myModule = new ClassA();

我認為創建一個導入捆綁包和my-js-script文件的html文件足以訪問myModule常量。 但是不幸的是，這還不夠。

index.html

<html>
    <head>
        <script src="./bundle.js"></script>
        <script src="./my-js-script.js"></script>
    </head>
    <body>
    </body>
</html>

Javascript文件

myModule.doSomething();

我想念什么？ 還是根本沒有機會這樣做？ Webpack配置非常簡單

var path = require("path");

module.exports = {
    entry: "./src/web-onion.ts",
    output: {
        path: path.resolve(__dirname, 'dist/'),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    }
}

Answer 1

你不能這樣子。 myModule不會作為全局導出。 如果要全局導出某些內容，請在TypeScript文件中使用：

window.something = myModule

注意：您將不得不擴展Window界面或使用(window as any) 。

通過Webpack從打字稿中導出對象並在JS中使用它

問題描述

打字稿文件

index.html

Javascript文件

1 個解決方案

解決方案1
2 已采納 2017-09-16 17:32:43

通過Webpack從打字稿中導出對象並在JS中使用它

問題描述

打字稿文件

index.html

Javascript文件

1 個解決方案

解決方案1 2 已采納 2017-09-16 17:32:43

解決方案1
2 已采納 2017-09-16 17:32:43