-1

Having a simple Typescript project I'm using Gulp to build individual JS files from my TS files (I'm doing this as I have multiple HTML files which are to remain separate).

    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'))
]);

So inside my HTML I'll have something like - 

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

Lets say that the TS file had a reference to a 3rd party code base such as jQuery. The code builds and deploys fine with no errors, but when I go to call a method in my TS/JS that contains the jQuery it fails. This is because when runs it has no jQuery code.

Now I can include the jQuery code using a script tag - 

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

but I'd rather not. Is there any way of including/bundling the 3rd party code into the transpiled JS files.

EDIT

To be clear - I'm looking to have a Typescript project that generates some JS files and anything that those JS files depend on should be bundled with them without the need to load them separately. So if A.js requires B.js, then I want the build to see that and include B.js with A.js to save me adding B.js to some html file. As an answer below has suggested - Broswerify, but I've not figured that out yet in my setup.

delp
  • 771
  • 11
  • 20

3 Answers3

1

You can just do something like here, where you add the script tag to the document with 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>

Another method would be to use Browserify or RequireJS. However you must always check the license of any project you include in yours. It wouldn't be anything unusual to provide a Get Started code block and include a

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

in it on the other hand, and that is what I'd recommend as many people use jQuery also on their own in their JS projects.

Community
  • 1
  • 1
maprambo
  • 36
  • 2
  • Your first option still involves adding/coupling the script which I'm trying to avoid. I use jQuery as an example as the 3rd party code not hosted anywhere I will be using is in the same modular format - so I'm basing all knowledge gathering around that. So I'm discounting the 1st option (I'm already kind of doing that), the 2nd option - browserify I'm looking into. It may do it, but unsure how as all attempts so far haven't worked. – delp Aug 26 '16 at 15:44
  • Do you have problems concerning setting up browserify or using jQuery after you've bundled it? – maprambo Aug 28 '16 at 18:04
  • Its browserify - I think. Think your answer of using Browserify is what I need, as in bundling it all into one file (like a packaged file). So whatever version of a lib I use in my packaged code, will be the version used without those using my packaged code needing to know about it. – delp Aug 29 '16 at 10:14
  • I'll give it a up vote, but it doesn't give specifics on using Browserify - but its good enough to point me in the correct direction (I think, still to get time to sort it fully) – delp Aug 30 '16 at 09:29
0

Using mainbowerfiles in gulp (pulled in jquery with bower) Install jquery with bower

bower install --save jquery

In the html

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

in your gulp file

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);
    });
Paul Swetz
  • 2,234
  • 1
  • 11
  • 28
  • I can see how that would work, but its not an ideal solution. Its another step (bower) and you still have to add that js reference into the html page. Ideal solution will involve some config that will look at my TS project which already has the jQuery node_module & is included in the typings folder - so between those two points I'd expect it to be able to bundled. – delp Aug 26 '16 at 15:44
  • If you have jquery installed by npm (never stated that) already just skip the bower steps and include your file from node_modules instead of loading it via mainbowerfiles, same difference. You can also use CDNs in the globs instead of files. – Paul Swetz Aug 26 '16 at 18:21
  • You can check out here for using cdns in gulp -> https://www.npmjs.com/package/gulp-cdnizer – Paul Swetz Aug 26 '16 at 19:09
  • Need to look at the problem in a non JS kind of way - I do not want links to for example jQuery (now in my case its not jQuery - but its a 3rd party source which we have the appropriate licenses which is bundled same as jQuery). So CDN's aren't the way forward in this case. Think of it like a compiled packaged lib (not JS) - it may have loads of other code, but once built you have no idea about them. So in my TS/JS code I ref other packages and when I bundle everything up wish to only have one import/required file – delp Aug 29 '16 at 10:15
0

The answer to my question is to use webpack and the below link is a clear example which shows how to create a Typescript project and include 3rd party library's such as jQuery here - http://www.jbrantly.com/typescript-and-webpack/

This does have one downside at the moment in that it works with tsd.json config which is now deprecated in favour of using typings.json.

Still it answers this question, even if it leads to another.

delp
  • 771
  • 11
  • 20