Typescript Browserify&x2B;打字稿
大家好 我试图用Gulp构建我的web项目。我想使用TypeScript,我想用browserify来判定依赖项 但是我有点麻烦 我使用下一个代码进行构建:Typescript Browserify&x2B;打字稿,typescript,gulp,browserify,Typescript,Gulp,Browserify,大家好 我试图用Gulp构建我的web项目。我想使用TypeScript,我想用browserify来判定依赖项 但是我有点麻烦 我使用下一个代码进行构建: var path = { build: { js: 'build/js/', }, src: { ts: './src/ts/*.ts', }, }; gulp.task("ts:build", function(){ glob(path.src.ts, {},
var path = {
build: {
js: 'build/js/',
},
src: {
ts: './src/ts/*.ts',
},
};
gulp.task("ts:build", function(){
glob(path.src.ts, {}, function(err, files){
var b = browserify({
cache: {},
packageCache: {},
debug: true
});
_.forEach(files, function(file){
b.add(file);
});
b.plugin('tsify', { noImplicitAny: true })
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest(path.build.js))
});
});
});
我不明白我必须如何声明依赖项。例如,我有两个*.ts文件:main.ts和someclass.ts。在someclass.ts中,我写了一些类:
class SomeClass {
// bla-bla-bla
}
export = SomeClass;
我想在main.ts中使用这个类。我尝试使用browserify:
var settingsPanel = require("./someclass");
gulp构建工作正常,但在浏览器控制台中我看到了
node\u modules\browserify\node\u modules\browser-pack\u prelude.js:1uncought
错误:找不到模块'./someclass'
我将非常乐意为您提供有关这方面的任何建议。特别是关于gulp+browserify+typescript的一些代码示例的链接。我目前正在处理一个非常类似的构建 在我的构建中,有一个任务是使用
commonjs
模块从TS编译到JS。在gulpfile.js
中,当您将TS编译成js时,需要向编译器指示使用commonjs
模块:
var tsProject = ts.createProject({
removeComments : true,
noImplicitAny : true,
target : 'ES3',
module : 'commonjs', // !IMPORTANT
declarationFiles : true
});
我还有第二个任务,它指示要浏览的应用程序JS入口点(main.JS
),然后它将生成bundle文件,对其进行丑化并生成源映射
My main.ts文件包含以下内容:
///<reference path="./references.d.ts" />
import headerView = require('./header_view');
import footerView = require('./footer_view');
import loadingView = require('./loading_view');
headerView.render({});
footerView.render({});
loadingView.render({});
完整的源代码(正在进行中的工作)可在上获得。看起来browserify正在从磁盘上获取(示例中的jsEntryPoint)。这是不是像咕噜声?我以为Gulp是关于streams的。你可以在这里找到如何使用browserify和TS:
// ....
var paths = {
ts : './source/ts/**/**.ts',
jsDest : './temp/js/',
dtsDest : './temp/definitions/',
scss : './source/scss/**/**.scss',
scssDest : './temp/css/',
jsEntryPoint : './temp/js/main.js',
bowerComponents : './bower_components',
nodeModules : 'node_modules',
temp : './temp',
dist : './dist/'
};
var tsProject = ts.createProject({
removeComments : true,
noImplicitAny : true,
target : 'ES3',
module : 'commonjs',
declarationFiles : true
});
// Build typescript
gulp.task('tsc', function(){
var tsResult = gulp.src(paths.ts).pipe(ts(tsProject));
tsResult.dts.pipe(gulp.dest(paths.dtsDest));
tsResult.js.pipe(gulp.dest(paths.jsDest));
});
// Browserify, uglify and sourcemaps
gulp.task('minify-js', function () {
// transform regular node stream to gulp (buffered vinyl) stream
var browserified = transform(function(filename) {
var b = browserify({ entries: filename, debug: true });
return b.bundle();
});
return gulp.src(paths.jsEntryPoint)
.pipe(browserified)
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.dist));
});
// ....