项目结构
Proj
--wwwroot/scripts
--scripts
--tsconfig.json
----Account
------app.ts
--gulpfile.js
在脚本/ Account / app.ts中给出以下TypeScript:
function sayHello() {
alert('hello world');
}
一个tsconfig.json文件
{
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"sourceMap": true,
"target": "es6",
"lib": [ "es6", "dom" ]
},
"compileOnSave": false
}
和一个gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
gulp.task('default', function () {
return browserify({
basedir: '.',
entries: ['scripts/Account/app.ts'],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source('scripts/Account/app.js'))
.pipe(gulp.dest("wwwroot/scripts"));
});
我在wwwroot / scripts / app.js中获得了一个输出文件。但是无法从使用它的网页调用该函数,因为它不是全局可用的,因为它似乎包含在函数中:
那么我在编译步骤中缺少什么才能调用基本的打字稿函数?我已经尝试导出该函数,在这种情况下,它只是将它添加到exports对象:
配置:指定要用作standalone lib的名称
gulp.task('default', function () {
return browserify({
basedir: '.',
entries: ['scripts/Account/app.ts'],
cache: {},
packageCache: {},
standalone : "XLib", // specify a name to be used as standalone lib
})
.plugin(tsify)
.bundle()
.pipe(source('scripts/Account/app.js'))
.pipe(gulp.dest("wwwroot/scripts"));
});
公开功能:
export function sayHello() {
alert('hello world');
}
在浏览器中使用库:
<script>
XLib.sayHello();
</script>
演示: