[英]How to provide global TypeScript classes via WebPack bundle in JS
我目前正在使用TypeScript。 我想用TS替換JS,但是我有很多JS文件,因此我只想在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");
您可以提到,Car是undefined
。
如何在其他JS文件中使用Car類? (在ts編譯和webpack捆綁之后)
這是我的舊任務:
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所提到的,您可以使用暴露加載器,但是我仍然對暴露加載器有一個疑問:
我可以僅將一個打字稿文件添加到全局變量嗎?
我有三個用於打字稿的打字稿文件:
效果很好:我現在可以使用:
Library.Car()
但是:當我有另一個打字稿文件/類時,如下所示:
我只能使用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,我不確定)
我創建了一個exporter.ts,可以重新導出所有全局類,以便在任何js文件中使用這些類,如Joshua Barnett在評論中所述:
//exporter.ts
export { Car } from "./car.ts";
export { Delivery } from "./delivery.ts";
我還需要告訴webpack在文件數組的末尾捆綁出口商打字稿文件。 (我不是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");
您需要使用暴露加載器 ,以使模塊可通過全局作用域使用。
// 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.