NPM和在angular2打字稿中加载外部库

Question

I am using Ionic2 (Browserify), Typescript with NPM.

I am trying to understand how typescript generates the typescript bundle of code and what is included in it. In some cases my node require files are referenced and in other cases they are not.

What seems to be happening is that in some instances eg jquery i am forced to add a script tag manually in other cases like lodash these are resolved auto-magically and bundled?

What is determining what is correctly referenced as part of the typescript compilation process and what has to happen outside of the process?

In typescript i am using:

import * as jQuery from 'jquery'; -- need to manually add script tag to index.html

import * as _ from 'lodash'; --do not need to add script tag - this is "automagically" added

See image below - some libraries are loaded others are not from the node_modules folder.

Is there something i am missing or is this use case specific to Ionic platform bundling?

Thanks

Package Json below.

{
  "name": "ionic-conference-app",
  "description": "Ionic Conference App",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "^2.0.0-rc.2",
    "angular2-jwt": "^0.1.18",
    "angular2-moment": "^0.8.2",
    "breeze-client": "^1.5.10",
    "es6-shim": "0.35.0",
    "fullcalendar": "^3.0.0-beta",
    "ionic-angular": "2.0.0-beta.11",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0",
    "jquery": "^3.1.0",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "momentjs": "^1.1.14",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-tslint": "^5.0.0",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "ionic-gulp-tslint": "^1.0.0",
    "run-sequence": "1.1.5",
    "tslint": "^3.10.1",
    "tslint-ionic-rules": "^0.0.3"
  },
  "cordovaPlugins": [
    {
      "locator": "https://github.com/VersoSolutions/CordovaClipboard",
      "id": "com.verso.cordova.clipboard"
    },
    {
      "locator": "https://github.com/apache/cordova-plugin-splashscreen.git",
      "id": "cordova-plugin-splashscreen"
    },
    "cordova-plugin-crosswalk-webview",
    "cordova-plugin-whitelist"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ]
}

Standard Ionic2 Gulpfile

var gulp = require('gulp'),
    gulpWatch = require('gulp-watch'),
    del = require('del'),
    runSequence = require('run-sequence'),
    argv = process.argv;


/**
 * Ionic hooks
 * Add ':before' or ':after' to any Ionic project command name to run the specified
 * tasks before or after the command.
 */


gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);

// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);

/**
 * Ionic Gulp tasks, for more information on each see
 * https://github.com/driftyco/ionic-gulp-tasks
 *
 * Using these will allow you to stay up to date if the default Ionic 2 build
 * changes, but you are of course welcome (and encouraged) to customize your
 * build however you see fit.
 */
var buildBrowserify = require('ionic-gulp-browserify-typescript');
var buildSass = require('ionic-gulp-sass-build');
var copyHTML = require('ionic-gulp-html-copy');
var copyFonts = require('ionic-gulp-fonts-copy');
var copyScripts = require('ionic-gulp-scripts-copy');
var tslint = require('ionic-gulp-tslint');

var isRelease = argv.indexOf('--release') > -1;

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});
gulp.task('build', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      buildBrowserify({
        minify: isRelease,
        browserifyOptions: {
          debug: !isRelease
        },
        uglifyOptions: {
          mangle: false
        }
      }).on('end', done);
    }
  );
});

gulp.task('sass', buildSass);
gulp.task('html', copyHTML);
gulp.task('fonts', copyFonts);
gulp.task('scripts', copyScripts);
gulp.task('clean', function(){
  return del('www/build');
});
gulp.task('lint', tslint);

Answer 1

The issue is most likely due to the jQuery import not being used. In such situations, TypeScript won't emit a require call - and without a require call, the jquery module will not make it into the bundle. Instead, you can use this import syntax:

import 'jquery';

There is a discussion regarding this TypeScript feature in this GitHub issue .