Javascript Typescript-在发布的代码中包含第三方代码

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

所以在我的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文件中

编辑

我希望有一个Typescript项目可以生成一些JS文件，这些JS文件所依赖的任何东西都应该与它们捆绑在一起，而不需要单独加载它们。 因此，如果A.js需要B.js，那么我希望构建能够看到这一点，并将B.js包含在A.js中，以避免将B.js添加到某个html文件中。

---

正如下面的回答所建议的-Broswerify，但我还没有在我的设置中弄明白这一点。

您可以执行以下操作，即使用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>

文件。写“\\”；

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

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

---

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

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

bower install --save jquery    

在html中

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

---

我的问题的答案是使用webpack，下面的链接是一个清晰的示例，展示了如何创建Typescript项目，并在此处包含第三方库，如jQuery-

目前，这确实有一个缺点，即它与tsd.json config一起使用，而现在由于使用typings.json而被弃用

---

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

您的第一个选择仍然涉及添加/耦合我试图避免的脚本。我以jQuery为例，因为我将使用的任何地方都没有托管的第三方代码都是相同的模块格式，所以我将所有的知识收集都基于此。所以我对第一个选项（我已经在做这件事了）打折，第二个选项——我正在研究的browserify。它可以做到这一点，但不确定是如何做到的，因为到目前为止所有的尝试都没有奏效。你在设置browserify或捆绑后使用jQuery方面有问题吗？我想是它的browserify。我认为使用Browserify的答案就是我所需要的，比如将所有内容捆绑到一个文件中（比如打包文件）。因此，我在打包代码中使用的lib的任何版本，都将是那些使用我打包代码的人不需要知道的版本。我会投赞成票，但它没有给出关于使用Browserify的详细信息-但它足以为我指明正确的方向（我想，仍然需要时间对它进行全面排序）我知道这是怎么回事，但这不是一个理想的解决方案。这是另一个步骤（bower），您仍然需要将js引用添加到html页面中。理想的解决方案将涉及一些配置，这些配置将查看我的TS项目，该项目已经有jQuery node_模块，并且包含在typings文件夹中-因此在这两点之间，我希望它能够捆绑在一起已经跳过了bower步骤，从node_模块中包含您的文件，而不是通过MainBowerFile加载，相同的区别。你也可以在globs中使用cdn而不是文件。你可以在这里查看在gulp中使用cdn->需要以一种非JS的方式来看待这个问题-我不想链接到例如jQuery（现在在我的例子中它不是jQuery-而是一个第三方源，我们有与jQuery捆绑在一起的适当许可证）。因此，在这种情况下，CDN不是前进的方向。把它想象成一个已编译的打包库（而不是JS）——它可能有很多其他代码，但一旦构建，你就不知道它们了。因此，在我的TS/JS代码中，我引用了其他包，当我将所有内容打包时，我只希望有一个导入/所需的文件，如果投票失败，请给出一个原因。如果需要的话，至少看看我是否能让Q更清楚。

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

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);
    });