Typcript - включая сторонний код в выпущенном коде

Question

Имея простой проект Викистроки, я использую Gulp для создания отдельных файлов JS из моих файлов TS (я делаю это, поскольку у меня есть несколько файлов 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> 

, но я предпочел бы не так. Есть ли способ включить/объединить сторонний код в перекодированные файлы JS.

EDIT

Чтобы было ясно - я ищу, чтобы иметь машинопись проект, который генерирует некоторые JS-файлы и все, что эти JS файлы зависят должны быть в комплекте с ними без необходимости загружать их по отдельности. Так что если A.js требует B.js, то я хочу, чтобы сборка увидела это и включила B.js с A.js, чтобы сохранить меня, добавляя B.js в некоторый html-файл. Как ответ ниже предложил - Broswerify, но я еще не понял этого в моей настройке.

Answer 1

Ответ на этот вопрос на мой вопрос - использовать webpack, а приведенная ниже ссылка - яркий пример, который показывает как создать проект «Видимая» и включить в него библиотеку сторонних разработчиков, такую ​​как jQuery, здесь: http://www.jbrantly.com/typescript-and-webpack/

В настоящее время это имеет один недостаток в том, что он работает с конфигурацией tsd.json, которая теперь устарела в пользу использования typings.json.

Все еще он отвечает на этот вопрос, даже если он ведет к другому.

Answer 2

Вы можете просто сделать что-то вроде 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> 

в него с другой стороны, и это то, что я рекомендую, как много людей использует Jquery также самостоятельно в их проектах JS.

Answer 3

Использование mainbowerfiles в глотке (запряженных в JQuery с дачей) Установить JQuery с дачей

bower install --save jquery  

В HTML

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