如何通过 JS 中的 WebPack 包提供全局 TypeScript 类

Question

我目前正在研究 TypeScript。我想用TS替换JS，但是我有很多JS-Files，所以我只想在TS中创建新类，并想在我的旧JS文件atm中使用它们。稍后我想用TS替换所有JS。

我不是 100% 熟悉 webpack 和捆绑的 js 文件，所以我可以使用一些帮助。

是否有机会使用 gulp 将 TS 编译为 JS（已经完成 - 它可以工作）并在不同（旧）JS 文件中使用这些 TS 类？

TypeScript 文件：

class Car {
    seats: number;
    passengers: string[];

    add(passenger: string) {
        if(this.passengers.indexOf(passenger) === -1) {
            this.passengers.push(passenger);
        }
    }
}

JavaScript 文件：

var car = new Car();
car.seats = 5;
car.add("Pete");

正如您所提到的，汽车是undefined。

如何在其他 JS 文件中使用我的 Car 类？（在 ts 编译和 webpack 捆绑之后）

这是我以前的 gulp 任务：

gulp.task('bundle-ts-webpack', ['compile-ts-webpack'], function() {
    var tsFiles = glob.sync(config.js.tsSource);

    return webpackStream({
        /* configuration options */
        entry: tsFiles,
        module: {
            rules: [
                {
                    //test: /\.tsx?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/
                }
            ]
        },
        resolve: {
            extensions: ['.tsx', '.ts', '.js'],
            // use ts in js - begin
            alias: {
                'TS': path.resolve(config.js.tsDest, 'ts-bundle'),
                'ExpertFilterHelper': path.resolve('./static/ts/', 'car'),
                'test': path.resolve('.static/ts/', 'test-globals')
            }
            // use ts in js - end
        },
        // use ts in js - begin
        plugins: [
            new webpack.ProvidePlugin({
                'TS': 'TS',
                identifier: 'car',
                test: 'test'
            })
        ],
        // use ts in js - end
        output: {
            filename: 'ts-bundle.js',
            path: path.resolve(config.js.tsDest, 'dist')
        }
    })
        .pipe(gulp.dest(config.js.tsDest));
});

正如您在 gulp.task 中看到的那样，我已经尝试让它运行，但我仍然“不知道我在这里做什么”。

谁能给我一个提示？

我已经想过，要不要先把TS编译成JS，然后通过webpack打包，不知道这样能不能解决我的问题。

编辑/更新：

正如 Joshua Barnett 所说，您可以使用 Expose-loader，但我仍然对 Expose-loader 有疑问：

我只能将一个打字稿文件添加到全局变量中吗？

我有三个打字稿文件作为例子：

• A.ts
• B.ts
• 汽车.ts

这很好用：我现在可以使用了：

Library.Car()

但是： 当我有另一个像这样的打字稿文件/类时：

• A.ts
• B.ts
• 汽车.ts
• Delivery.ts

我只能使用Library.Delivery()，不能再使用Library.Car()。 有什么提示吗？

我当前的 gulp.task：

gulp.task('compile-ts-webpack', function() {
    var tsFiles = glob.sync('./static/ts/*.ts');

    console.log(require.resolve('./static/ts/z-car-test.ts'));

    return webpackStream(
        {
            entry: tsFiles,//path.resolve('./static/ts/z-car-test.ts'),
            output: {
                filename: 'ts-bundle.js',
                path: path.resolve('./static/js/modules')
            },
            devtool: "source-map",
            resolve: {
                extensions: ['.tsx', '.ts', '.js']
            },
            module: {
                rules: [{
                    test: /\.ts|\.tsx$/, //require.resolve('./static/ts/z-car-test.ts'),
                    use: [{
                        loader: 'expose-loader',
                        options: 'TSGlobals'
                    }, {
                        loader: 'ts-loader'
                    }]
                    //exclude: /node_modules/
                }]
            }
        }
    ).pipe(gulp.dest('./static/js/modules'));

编辑/更新 2：

如果您想在 TSGlobals 中添加多个类，您可以通过一点 hack 来做到这一点（我猜这是 hack，我不确定）

我创建了一个 exporter.ts，它重新导出我需要全局的所有类，以便在任何 js 文件中使用它们，正如 Joshua Barnett 在评论中提到的那样：

//exporter.ts
export { Car } from "./car.ts";
export { Delivery } from "./delivery.ts";

我还需要告诉 webpack 将导出器 typescript 文件捆绑到 files-array 的末尾。 （我不是 100% 确定原因）

//gulp.task
gulp.task('compile-ts', ['clean-ts'], function() {
    var tsFiles = glob.sync('./ts/*.ts', {"ignore":['./exporter.ts']}); // Ignore exporter.ts

//add the exporter.ts to the end of the array to provide the global TSGlobals Library.
    tsFiles.push(config.js.tsExporterFile);
[...]
}

现在我可以在任何 JS 文件中使用 TSGlobals！完美运行。

//whatever.js
var car = new TSGlobals.Car();
car.seats = 5;
car.add('Pete');

var delivery = new TSGlobals.Delivery();
delivery.doSomething("123");

Answer 1

您需要使用expose-loader 以使您的模块在全局范围内可用。

---

// File: webpack.config.js
const path = require('path')

module.exports = {
  context: path.resolve('src'),
  entry: './main.ts',
  module: {
    rules: [
      {
        test: require.resolve('./src/main.ts'),
        use: [{
          loader: 'expose-loader',
          options: 'Library'
        }, {
          loader: 'ts-loader'
        }],
        exclude: /node_modules/
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

---

// File: main.ts
export class Car {
    seats: number;
    passengers: string[];

    add(passenger: string) {
        if(this.passengers.indexOf(passenger) === -1) {
            this.passengers.push(passenger);
        }
    }
}

---

// File: main.js
var car = new Library.Car()
car.seats = 5
car.add('Pete')

---

确保调用模块的代码包含在模块包之后。

<!-- File: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
    <script src="main.js"></script>
  </body>
</html>