我在 TypeScript 项目中将 gulp
与 browserify
和 tsify
一起使用。以下是我的 gulpfile.js
的摘录:
var browserified = function (filename, debug) {
var b = browserify({
entries: filename,
debug: debug || false
});
b.plugin('tsify', {
noImplicitAny: true,
target: 'ES5'
});
b.transform('debowerify');
return b.bundle();
};
gulp.task('rebuild', ['lint', 'less'], function() {
var b = browserified ('./src/ts/main.ts', true);
return buildSourceMaps (b);
});
到目前为止,这是有效的。我想扩展它以便我可以 require
React JSX 文件。首先,我尝试了(从我的一个 TypeScript 文件):
import Test = require ('../jsx/Test.jsx');
但这不起作用,因为 tsify
会在查找 TypeScript 文件 ../jsx/Test.jsx.ts
时提示。所以我使用了以下技巧:
declare var require: any;
var Test = require ('../jsx/Test.jsx');
如果 Test.jsx
是纯 vanilla JavaScript,则可以。如果 Test.jsx
包含 TypeScript,它将失败,这是我所期望的。到目前为止,很清楚。
现在我想将 reactify
添加到我的 gulp 任务中,这样我就可以在这些文件中使用 JSX。 我卡住了! 我尝试将以下内容添加到我的 gulpfile.js
中的函数 browserified
:
b.plugin ('reactify', {
extension: 'jsx'
});
当 Test.jsx
包含实际的 JSX 时调用 gulp rebuild
时我仍然收到以下错误:
Unexpected token <
显然,gulp 在遇到第一个 JSX 特定术语时就卡住了。我认为 gulp 试图通过 TypeScript 编译器传递 JSX。这并不奇怪,因为我想不出一种方法来告诉 tsify
忽略我的 .jsx 文件。我是 gulp
的新手,所以我有点不知所措。关于如何设置 gulp
以允许带有所有 .ts 文件的 TypeScript 和带有所有 .jsx< 的 JSX 的任何想法/em> 文件?
最佳答案
这是我用于开发的 gulp 任务。它使用 watchify
以及 browserify
和 reactify
来构建您的代码,提供源映射,并重新捆绑您在运行中所做的任何更改。 path.ENTRY_POINT
变量是您的 React 应用程序的主要组件(通常是 app.js
或 main.js
)。
gulp.task('watch', function() {
gulp.watch(path.HTML, ['copy']);
var watcher = watchify(browserify({
entries: [path.ENTRY_POINT],
transform: [reactify],
debug: true,
cache: {}, packageCache: {}, fullPaths: true
}));
return watcher.on('update', function () {
watcher.bundle()
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_SRC))
console.log('Updated');
})
.bundle()
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_SRC));
});
我使用本教程设置了我的 gulpfile.js
,它为每个 gulp 任务提供了很好的解释:
http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/
关于javascript - 使用 browserify、tsify 和 reactify?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28602843/