Question

有一个简单的Typescript项目我使用Gulp从我的TS文件构建单独的JS文件（我这样做是因为我有多个HTML文件要保持独立）。

    var tsResult = gulp.src('./src/ts/**/*.ts')
    .pipe(ts(tsProject));

return merge([ // Merge the two output streams, so this task is finished when the IO of both operations are done.
    tsResult.dts.pipe(gulp.dest('release/definitions')),
    tsResult.js.pipe(gulp.dest('release/js'))
]);

所以在我的HTML中我会有类似的东西 -

 <script src="./js/myTSfileTranspiledToJS.js"></script>

让我们说TS文件引用了第三方代码库，例如jQuery。代码构建和部署没有错误，但是当我在我的TS / JS中调用包含jQuery的方法时，它失败了。这是因为在运行时它没有jQuery代码。

现在我可以使用脚本标记包含jQuery代码 -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

但我不愿意。有没有办法将第三方代码包含/捆绑到已编译的JS文件中。

修改

要清楚 - 我希望有一个可以生成一些JS文件的Typescript项目，这些JS文件依赖的任何东西都应该与它们捆绑在一起，而不需要单独加载它们。因此，如果A.js需要B.js，那么我希望构建能够看到并将A.js包含在A.js中以节省我将B.js添加到某个html文件中。如下面的答案建议 - Broswerify ，但我还没有在我的设置中找到答案。

Answer 1

您可以执行here之类的操作，使用JavaScript将脚本标记添加到文档中：

<script type="text/javascript">
document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

另一种方法是使用Browserify或RequireJS。但是，您必须始终检查您所包含的任何项目的许可。提供入门代码块并包含

并不是什么不寻常的事

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

另一方面，

就是我推荐的，因为很多人在他们的JS项目中也使用jQuery。

Answer 2

在gulp中使用mainbowerfiles（用bower拉入jquery）用bower安装jquery

bower install --save jquery

在html中

<script src="./js/site.min.js"></script>

你的gulp文件中的

var gulp = require('gulp'),
    uglify = require("gulp-uglify"), //uglify
    filter = require("gulp-filter"), //filters
    concat = require("gulp-concat"), //concat files
    mainBowerFiles = require('main-bower-files'); //auto get bower modules
var paths = {};
paths.jsSource = mainBowerFiles().concat(["js/myTSfileTranspiledToJS.js"]);
paths.baseReleaseFolder = "js";
paths.baseJSReleaseFile = "site.min.js";
gulp.task("min:js", function () {
    var jsFilter = filter('**/*.js', { restore: true });
    return gulp
        .src(paths.jsSource)
        .pipe(jsFilter)
        .pipe(sourcemaps.init({loadMaps:true}))
        .pipe(uglify())
        .pipe(concat(paths.baseReleaseFolder + "/" + paths.baseJSReleaseFile))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest("."))
        .pipe(jsFilter.restore);
    });

Answer 3

我的问题的答案是使用webpack，下面的链接是一个明显的例子，它展示了如何创建一个Typescript项目并在这里包含第三方库，例如jQuery - http://www.jbrantly.com/typescript-and-webpack/

目前这有一个缺点，因为它适用于tsd.json配置，现在不赞成使用typings.json。

仍然可以回答这个问题，即使它会导致另一个问题。

打字稿 - 包括已发布代码中的第三方代码

3 个答案: