我目前正在研究 TypeScript。我想用 TS 替换 JS,但是我有很多 JS 文件,所以我只想在 TS 中创建新类,并想在我的旧 JS 文件 atm 中使用它们。后来我想把所有的JS都换成TS。
我不是 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");
如您所述,Car 未定义
。
如何在其他 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打包,不知道能不能解决我的问题。
Edit/Updated:
正如 Joshua Barnett 提到的,您可以使用 expose-loader,但我仍然对 expose-loader 有疑问:
我可以只向全局变量添加一个 typescript 文件吗?
我有三个 typescript 文件用于示例:
- A.ts
- B.ts
- 汽车.ts
效果很好:我现在可以使用:
Library.Car()
但是: 当我有另一个 typescript 文件/类时:
- 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'));
Edit/Update 2:
如果你想将多个类添加到 TSGlobals 中,你可以通过一些技巧来实现(我猜这是一种技巧,我不确定)
我创建了一个 exporter.ts,它重新导出我需要全局的所有类,以便在任何 js 文件中使用它们,正如 Joshua Barnett 在评论中提到的:
//exporter.ts
export { Car } from "./car.ts";
export { Delivery } from "./delivery.ts";
我还需要告诉 webpack 将导出器 typescript 文件捆绑在文件数组的末尾。 (我不是 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");
最佳答案
您需要使用 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>
关于javascript - 如何通过 JS 中的 WebPack 包提供全局 TypeScript 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47472464/