Question

我要做的是将我在Typescript中编写的库与Webpack 2捆绑在一起，并且即使使用vanilla 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();

我认为创建一个导入bundle和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从typescript导出对象并在JS中使用它

打字稿文件

的index.html

Javascript文件

1 个答案: