打字稿 - 在发布的代码中包含第 3 方代码

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 文件引用了第 3 方代码库，例如 jQuery。代码可以正常构建和部署，没有错误，但是当我去调用我的 TS/JS 中包含 jQuery 的方法时，它失败了。这是因为它运行时没有 jQuery 代码。

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

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

但我不想。有什么方法可以将第 3 方代码 including/bundling 转换为转译后的 JS 文件。

编辑

需要明确的是——我希望有一个 Typescript 项目可以生成一些 JS 文件，并且这些 JS 文件所依赖的任何东西都应该与它们捆绑在一起，而不需要单独加载它们。因此，如果 A.js 需要 B.js，那么我希望构建看到它并包含 B.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 or RequireJS。但是，您必须始终检查您包含在您的项目中的任何项目的许可证。提供 Get Started 代码块并包含

并不是什么不寻常的事情

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

另一方面，这是我推荐的，因为很多人也在他们的 JS 项目中自己使用 jQuery。

Answer 2

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

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，下面的 link 是一个清晰的示例，它展示了如何创建 Typescript 项目并在此处包含第 3 方库，例如 jQuery - http://www.jbrantly.com/typescript-and-webpack/

目前这确实有一个缺点，因为它与 tsd.json 配置一起使用，现在不推荐使用 typings.json.

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

打字稿 - 在发布的代码中包含第 3 方代码

Typescript - including 3rd party code in released code

javascript

browserify

typescript

gulp

typescript1.8