打字稿 - 在已发布的代码中包括第 3 方代码答案

【问题标题】：Typescript - including 3rd party code in released code打字稿 - 在已发布的代码中包括第 3 方代码
【发布时间】：2017-01-03 03:13:16
【问题描述】：

有一个简单的 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。代码可以正常构建和部署，没有错误，但是当我在包含 jQuery 的 TS/JS 中调用一个方法时，它会失败。这是因为在运行时它没有 jQuery 代码。

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

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

但我宁愿不这样做。有没有办法将第 3 方代码包含/捆绑到转译的 JS 文件中。

编辑

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

【问题讨论】：

如果投反对票 - 请说明理由。至少看看我是否可以在需要时使 Q 更清晰。

标签： javascript typescript gulp browserify typescript1.8

【解决方案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。但是，您必须始终检查包含在您的项目中的任何项目的许可证。提供 Get Started 代码块并包含

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

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

【讨论】：

您的第一个选项仍然涉及添加/耦合我试图避免的脚本。我以 jQuery 为例，因为我将使用的任何地方都没有托管的第 3 方代码采用相同的模块化格式 - 所以我将所有知识收集都基于此。所以我打折第一个选项（我已经这样做了），第二个选项 - 我正在研究的 browserify。它可能会这样做，但不确定到目前为止所有尝试都没有奏效。
你在设置 browserify 或使用 jQuery 之后有问题吗？
它的 browserify - 我想。认为您使用 Browserify 的答案是我所需要的，就像将它们全部捆绑到一个文件中一样（如打包文件）。因此，我在打包代码中使用的任何版本的库都将是使用的版本，而使用我的打包代码的人不需要知道它。
我会投赞成票，但它没有提供有关使用 Browserify 的具体信息 - 但它足以为我指明正确的方向（我认为，还有时间对其进行排序完全）

【解决方案2】：

在 gulp 中使用 mainbowerfiles（在 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);
    });

【讨论】：

我可以看到它是如何工作的，但这不是一个理想的解决方案。它的另一个步骤（凉亭），您仍然必须将该 js 引用添加到 html 页面中。理想的解决方案将涉及一些配置，这些配置将查看我的 TS 项目，该项目已经具有 jQuery node_module & 包含在类型文件夹中 - 所以在这两点之间我希望它能够捆绑。
如果你已经通过 npm 安装了 jquery（从未说过）已经跳过了凉亭步骤并从 node_modules 包含你的文件，而不是通过 mainbowerfiles 加载它，同样的区别。您还可以在 glob 中使用 CDN 而不是文件。
你可以在这里查看在 gulp 中使用 cdns -> npmjs.com/package/gulp-cdnizer
需要以非 JS 的方式查看问题 - 我不希望链接到例如 jQuery（现在在我的情况下它不是 jQuery - 但它是我们拥有的第 3 方源与 jQuery 捆绑的适当许可证）。所以在这种情况下，CDN 不是前进的方向。把它想象成一个已编译的打包库（不是 JS）——它可能有很多其他代码，但是一旦构建你就不知道它们了。因此，在我的 TS/JS 代码中，我引用了其他包，当我将所有内容捆绑在一起时，希望只有一个导入/必需文件

【解决方案3】：

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

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

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

【讨论】：